Canvas Paint

by Tsuneo Yoshioka

HTML

<canvas id="mycanvas" width="255" height="255"></canvas>
<button id="download">Download</button>

CSS

canvas {
    box-shadow: 0 0 5px rgba(0,0,0,.3);
    cursor: crosshair;
}

JavaScript

var elCanvas = document.querySelector('#mycanvas');
var context = elCanvas.getContext('2d');
var offsetLeft = elCanvas.offsetLeft;
var offsetTop  = elCanvas.offsetTop;
var elPage = document.body;
var scrollLeft = elPage.scrollLeft;
var scrollTop  = elPage.scrollTop;

var drawing = false;
var lastPos = null;

listen(elCanvas, 'mousedown', function(event) {
    drawing = true;
    lastPos = getPos(event);
});
listen(elCanvas, 'mousemove', function(event) {
    if (!drawing) {
        return;
    }
    
    var p = getPos(event);
    context.beginPath();
    context.moveTo(lastPos[0], lastPos[1]);
    context.lineTo(p[0], p[1]);
    context.stroke();
    lastPos = p;
});
listen(document, 'mouseup', function(event) {
    drawing = false;
});
listen(document.querySelector('#download'), 'click', function(event) {
    window.open(elCanvas.toDataURL(), '_blank');
});

listen(document, 'scroll', function(event) {
    scrollLeft = elPage.scrollLeft;
    scrollTop  = elPage.scrollTop;
});

function listen(elem, type, listener) {
    elem.addEventListener(type, listener, false);
}

function getPos(event) {
    var x = event.clientX - offsetLeft + scrollLeft;
    var y = event.clientY - offsetTop  + scrollTop;
    return [x, y];
}