Smooth user drawn lines in canvas

Question

I'm using <canvas> to capture user input in the form of a signature and am trying to figure out how to smooth the input from the mouse.

I think I need to process the user's mouse movements chunk by chunk and smooth each chunk, I'm not after super smoothing but any improvement on the jagged input would be good.

Thanks, Mark

Answer 1

Consider connecting dots by using lines automatically, or even, use quadraticCurveTo, but you must calculate the middle point by yourself.

Answer 2

I haven't tested this in any way, but you could try drawing small circles with a radial fill gradient.

Answer 3

Not sure this might help you, I wrote this code from scratch in few minutes.

Though it isn't very smooth, but please give it a try

markup :

<canvas id="canvas"></canvas> 

JavaScript :

window.onload = function() {
        var canvas = document.getElementById('canvas');
        var ctx = canvas.getContext('2d');
        var width  = window.innerWidth;
        var height = window.innerHeight;
        canvas.height = height;
        canvas.width = width;
        canvas.addEventListener('mousedown', function(e) {
            this.down = true;   
            this.X = e.pageX ;
            this.Y = e.pageY ;
            this.color = rgb();
        }, 0);
        canvas.addEventListener('mouseup', function() {
            this.down = false;          
        }, 0);
        canvas.addEventListener('mousemove', function(e) {
            this.style.cursor = 'pointer';
            if(this.down) {
                 with(ctx) {
                    beginPath();
                    moveTo(this.X, this.Y);
                    lineTo(e.pageX , e.pageY );
                    strokeStyle = this.color;
                    stroke();
                 }
                 this.X = e.pageX ;
                 this.Y = e.pageY ;
            }
        }, 0);

        function rgb() {
            color = 'rgb(';
            for(var i = 0; i< 3; i++) {
                color += Math.floor(Math.random() * 255)+',';
            }
            return color.replace(/\,$/,')')
        }       
    };

Test this code http://jsbin.com/ateho3

Answer 4

How about using Bezier curves?