Draw Smooth Lines On A Canvas

I want to draw a line on a canvas with context.globalCompositeOperation = 'destination-out'; context.globalAlpha = 0.118; The result looks like this: The background if the image

Solution 1:

Assuming your Konva thingie does not provide a readymade solution, you will have to interpolate the touch screen event positions with a constant displacement.

Something like this:

circle.on('dragmove touchmove', function (e) {

    if (circle.prev_pos) {
        var dx = e.evt.clientX - circle.prev_pos.x;
        var dy = e.evt.clientY - circle.prev_pos.y;
        var dist = Math.max (Math.abs(dx), Math.abs(dy));
        dx = dx / dist;
        dy = dy / dist;
        var x = circle.prev_pos.x;
        var y = circle.prev_pos.y;
        var d;
        for (d = 0 ; d < dist ; d++)
        {
            erase(x, y, circle.radius(), img.x(), img.y());
            x += dx;
            y += dy;
        } 
    }
    circle.prev_pos = { x:e.evt.clientX, y:e.evt.clientY};
});

See this fiddle.