Curves are broken while drawing path in canvas

Question

I am using the following code to draw a path based on variable width changes on a Canvas, So far everything works fine and i can easily draw path using this code.

But the path drawn is not smooth, Especially when i draw a curved path all the lines look broken, Why does this happen? Is anything wrong in my code?

public class FingerPaint extends GraphicsActivity
{
    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(new MyView(this));
    }

    public void colorChanged(int color) 
    {

    }

    public class MyView extends View  implements OnTouchListener
    {
        private static final float      STROKE_WIDTH = 3f;      

        private Paint                   paint = new Paint();

        private Path                    mPath = new Path();

        ArrayList<Path>                 mPaths = new ArrayList<Path>();

        private Canvas                  m_CanvasView;

        private Bitmap                  m_CanvasBitmap;

        int                             variableWidthDelta = 1;

        private float                   mX, mY;

        private static final float       TOUCH_TOLERANCE = 4;       

        ArrayList<Point>                points = new ArrayList<Point>(64);

        public MyView(Context context) 
        {
            super(context);
            setFocusable(true);
            setFocusableInTouchMode(true); 
            this.setOnTouchListener(this);

            paint.setAntiAlias(true);
            paint.setDither(true);
            paint.setStyle(Paint.Style.STROKE);
            paint.setStrokeJoin(Paint.Join.ROUND);
            paint.setStrokeCap(Paint.Cap.ROUND);    
            paint.setStrokeWidth(STROKE_WIDTH);
        }

        @Override
        protected void onSizeChanged(int w, int h, int oldw, int oldh) 
        {
            super.onSizeChanged(w, h, oldw, oldh);

            m_CanvasBitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
            m_CanvasView = new Canvas(m_CanvasBitmap);
        }

        @Override
        protected void onDraw(Canvas canvas) 
        {
            canvas.drawBitmap(m_CanvasBitmap, 0f, 0f, null);            
            m_CanvasView.drawPath(mPath, paint);    
        }

        public boolean onTouch(View arg0, MotionEvent event)
        {
            float x = event.getX();
            float y = event.getY();

            switch (event.getAction())
            {
                case MotionEvent.ACTION_DOWN:
                {        
                    mPath.reset();
                    mPath.moveTo(x, y);
                    mX = x;
                    mY = y;
                    break;
                }
                case MotionEvent.ACTION_MOVE:
                {                           
                    if (event.getPressure()>=0.00 && event.getPressure()<0.05)
                    {
                        variableWidthDelta = 1;
                    }
                    else if (event.getPressure()>=0.05 && event.getPressure()<0.10)
                    {
                        variableWidthDelta = 1;
                    }
                    else if (event.getPressure()>=0.10 && event.getPressure()<0.15)
                    {
                        variableWidthDelta = 2;
                    }
                    else if (event.getPressure()>=0.15 && event.getPressure()<0.20)
                    {
                        variableWidthDelta = 2;
                    }
                    else if (event.getPressure()>=0.20 && event.getPressure()<0.25)
                    {
                        variableWidthDelta = 1;
                    }
                    else if (event.getPressure() >= 0.25 && event.getPressure()<0.30)
                    {
                        variableWidthDelta = 1;
                    }
                    else if (event.getPressure() >= 0.30 && event.getPressure()<0.35)
                    {
                        variableWidthDelta = 2;
                    }
                    else if (event.getPressure() >= 0.35 && event.getPressure()<0.40)
                    {
                        variableWidthDelta = 2;
                    }
                    else if (event.getPressure() >= 0.40 && event.getPressure()<0.45)
                    {
                        variableWidthDelta = 3;
                    }
                    else if (event.getPressure() >= 0.45 && event.getPressure()<0.50)
                    {
                        variableWidthDelta = 4;
                    }                  

                    paint.setStrokeWidth(STROKE_WIDTH + variableWidthDelta);

                    float dx = Math.abs(x - mX);
                    float dy = Math.abs(y - mY);

                    if (dx >= TOUCH_TOLERANCE || dy >= TOUCH_TOLERANCE) 
                    {           
                        points.add(new Point(event.getX(), event.getY()));
                        mPath = new Path();

                        mPath = generatePath();                                                                                                                                     
                    }

                    break;
                }
                case MotionEvent.ACTION_UP:
                {
                    break;
                }
            }

            invalidate();
            return true;
        }

        class Point
        {
            public final float x;
            public final float y;
            public Point(float x, float y)
            {
                this.x = x;
                this.y = y;
            }
        }

        public Path generatePath()
        {
            final float tangentScale = 0.3F;
            int pointcount = points.size();

            mPath.moveTo(points.get(0).x, points.get(0).y);
            mPath.cubicTo(
                    points.get(0).x + (points.get(1).x - points.get(0).x)*tangentScale,
                    points.get(0).y + (points.get(1).y - points.get(0).y)*tangentScale,
                    points.get(1).x - (points.get(2).x - points.get(0).x)*tangentScale,
                    points.get(1).y - (points.get(2).y - points.get(0).y)*tangentScale,
                    points.get(1).x, points.get(1).y
                    );
            for(int p=2; p<pointcount-1; p++)
            {
                mPath.cubicTo(
                        points.get(p-1).x + (points.get(p).x - points.get(p-2).x)*tangentScale,
                        points.get(p-1).y + (points.get(p).y - points.get(p-2).y)*tangentScale,
                        points.get(p).x - (points.get(p+1).x - points.get(p-1).x)*tangentScale,
                        points.get(p  ).y - (points.get(p+1).y - points.get(p-1).y)*tangentScale,
                        points.get(p).x, points.get(p).y
                        );
            }
            mPath.cubicTo(
                    points.get(pointcount-2).x + (points.get(pointcount-1).x - points.get(pointcount-3).x)*tangentScale,
                    points.get(pointcount-2).y + (points.get(pointcount-1).y - points.get(pointcount-3).y)*tangentScale,
                    points.get(pointcount-1).x - (points.get(pointcount-1).x - points.get(pointcount-2).x)*tangentScale,
                    points.get(pointcount-1).y - (points.get(pointcount-1).y - points.get(pointcount-2).y)*tangentScale,
                    points.get(pointcount-1).x, points.get(pointcount-1).y
                    );

            return mPath;
        }
    }
}

Answer 1

The onTouch event is not fired fast enough, so if you draw curves fast enough you will see this happening.

You can improve the point resolution by getting all recorded points between this onTouch event and the last one. Use event.getHistorySize() to get the amount of available points, and get their positions with event.getHistoricalX(int) and event.getHistoricalY(int).

If you still have problems, you would probably have to implement some sort of interpolation of the points. Here is a simple example using cubicTo() to get a smooth path:
points is an array of all points that are to be drawn.
pointcount is the amount of points

//This code is untested
public Path generatePath(){
Path path = new Path();
if( points.size() < 3 ) return path;
final float tangentScale = 0.3;

path.moveTo(points[0].x, points[0].y);
path.cubicTo(
    points[0].x + (points[1].x - points[0].x)*tangentScale,
    points[0].y + (points[1].y - points[0].y)*tangentScale,
    points[1].x - (points[2].x - points[0].x)*tangentScale,
    points[1].y - (points[2].y - points[0].y)*tangentScale,
    points[1].x, points[1].y
    );
for(int p=2; p<pointcount-1; p++){
    path.cubicTo(
        points[p-1].x + (points[p].x - points[p-2].x)*tangentScale,
        points[p-1].y + (points[p].y - points[p-2].y)*tangentScale,
        points[p  ].x - (points[p+1].x - points[p-1].x)*tangentScale,
        points[p  ].y - (points[p+1].y - points[p-1].y)*tangentScale,
        points[p].x, points[p].y
        );
}
path.cubicTo(
    points[pointcount-2].x + (points[pointcount-1].x - points[pointcount-3].x)*tangentScale,
    points[pointcount-2].y + (points[pointcount-1].y - points[pointcount-3].y)*tangentScale,
    points[pointcount-1].x - (points[pointcount-1].x - points[pointcount-2].x)*tangentScale,
    points[pointcount-1].y - (points[pointcount-1].y - points[pointcount-2].y)*tangentScale,
    points[pointcount-1].x, points[pointcount-1].y
    );
return path;
}

Adapting this for your specific case: (You will have to modify the above method to use .get() instead of array accessors, since I am using a list here)

//A class for holding x and y values:
class Point{
    public final float x;
    public final float y;
    public Point(float x, float y){
        this.x = x;
        this.y = y;
    }
}

//In your View:
ArrayList<Point> points = new ArrayList<Points>(64);

//In the onTouch-method if the tolerance is ok:
points.add(new Point(event.getX(), event.GetY());
mPath = generatePath();

The above will generate a rounded path that you can draw. Note that it uses all points, so they will all be redrawn every time (you might have to clear the canvas to avoid some artiefacts). You might want to move the generatePath-call to when you lift the finger, so you get a faster, but jagged preview path while drawing.