Drawing on SurfaceView

I'm trying to draw on surfaceview using onTouch listener, but i'm getting weird drawings (the edge of the line moves on it's own) as you can see in the GIF bellow:

Here's my code:

public class MainActivity extends AppCompatActivity  implements SurfaceHolder.Callback {

    SurfaceView surfaceView;
    SurfaceHolder surfaceHolder;
    Canvas canvas;
    private Path path;
    Paint mPaint = new Paint();


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate( savedInstanceState );
        setContentView( R.layout.activity_main );

        surfaceView = (SurfaceView) findViewById( R.id.surfaceView );
        surfaceHolder = surfaceView.getHolder();
        surfaceView.getHolder().addCallback( this );

        canvas = surfaceView.getHolder().lockCanvas();

        mPaint = new Paint();
        mPaint.setAntiAlias( true );
        mPaint.setDither( true );
        //  mPaint.setColor(0xff000000);
        mPaint.setStyle( Paint.Style.STROKE );
        mPaint.setStrokeJoin( Paint.Join.ROUND);
        mPaint.setStrokeCap( Paint.Cap.ROUND);
        mPaint.setStrokeWidth( 50);
    }

    @SuppressLint("ClickableViewAccessibility")
    @Override
    public void surfaceCreated(SurfaceHolder holder) {
        Log.d( "surfaceCreated", "surfaceCreated " );


        path = new Path();
        surfaceHolder = holder;
        surfaceView.setOnTouchListener( new View.OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                float X = event.getX();
                float Y = event.getY();
                switch (event.getActionMasked()) {
                    case MotionEvent.ACTION_DOWN:
                        Log.d( "surfaceCreated", "action down x="+X );

//                      canvas = surfaceHolder.lockCanvas();

                        path.moveTo(X,Y);



                        //  mv.touch_start(X,Y);
                        //  canvas = surfaceHolder.lockCanvas();

                        break;
                    case MotionEvent.ACTION_MOVE:
                        Log.d( "surfaceCreated", "action move  x="+X );

                        path.lineTo(X,Y);
                        break;
                    case MotionEvent.ACTION_UP:
                        Log.d( "surfaceCreated", "action up  x="+X );

                        path.lineTo(event.getX(),event.getY());

                        Canvas canvas = surfaceHolder.lockCanvas();
                        canvas.drawPath(path, mPaint);
                        path.reset();
                        surfaceHolder.unlockCanvasAndPost(canvas);

                        //  mCanvas.drawLine( downx, downy, upx, upy, mPaint );
                        break;

                }
                if(path != null){
                    Log.d( "surfaceCreated", "path is not null"+path );
                    Canvas canvas = surfaceHolder.lockCanvas();
                    canvas.drawPath(path, mPaint);
                    surfaceHolder.unlockCanvasAndPost(canvas);
                }
                return true;

            }
        });


    }

    @Override
    public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) {

    }

    @Override
    public void surfaceDestroyed(SurfaceHolder holder) {

    }
}

How i can solve the issue? and how i can make the surfaceview white, as you can see it's black at the beginning. Thank you!

from Drawing on SurfaceView