Canvas Painting

by skibulk

HTML

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

CSS

#sketchpad {
    width: 400px;
    height: 400px;
}

JavaScript

(function() {
    // Mouse
    var reset  = true;
    var mouse1 = {x: 0, y: 0};
	var mouse2 = {x: 0, y: 0};
    
    // Canvas
	var canvas = document.getElementById('sketchpad');
	var ctx = canvas.getContext('2d');
	ctx.lineWidth = 1;
	ctx.lineJoin = 'round';
	ctx.lineCap = 'round';
	ctx.strokeStyle = 'black';
    
    // Mouse
    var getMousePos = function(e) {
        var rect = canvas.getBoundingClientRect();
        return {
          x: e.clientX,
          y: e.clientY
        };
    }
    
    // Canvas
	var onPaint = function(e) {
        if(reset)
        {
            mouse2 = getMousePos(e);
            reset = false;
        }
        else
        {
            mouse1 = mouse2;
            mouse2 = getMousePos(e);
            ctx.beginPath();
            ctx.moveTo(mouse1.x, mouse1.y);
            ctx.lineTo(mouse2.x, mouse2.y);
            ctx.closePath();
            ctx.stroke();
        }
	};
    
    // Events
	canvas.addEventListener('mousedown', function(e) {
		canvas.addEventListener('mousemove', onPaint, false);
	}, false);
	
	canvas.addEventListener('mouseup', function(e) {
		canvas.removeEventListener('mousemove', onPaint, false);
        reset = true;
	}, false);
}());