Scroll-Draw

Draw with the magic mouse scroll surface.

by Santiago J

HTML

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

CSS

body {
    margin: 0;
}
#paper {
    margin: 200px;
}

JavaScript

(function() {
    var body = document.body;
    var canvas = body.querySelector("#paper");
    var ctx = canvas.getContext("2d");
    var bctx = document.createElement("canvas").getContext("2d");
    var cursor = { x: 200, y: 200, down: false };
    
    body.style.width = screen.width + 300;
    body.style.height = screen.height + 300;
    
    bctx.canvas.width = canvas.width = 2000;
    bctx.canvas.height = canvas.height = 2000;
    
    window.onmousedown = function() {
        cursor.down = true;
    };
    
    window.onmouseup = function() {
        cursor.down = false;
    };
    
    function drawScroll(e) {
        var el = body;
        var dx = 200 - el.scrollLeft, dy = 200 - el.scrollTop;
        
        ctx.clearRect(0,0, canvas.width, canvas.height);
        bctx.beginPath();
        bctx.moveTo(cursor.x, cursor.y);
        cursor.x += dx;
        cursor.y += dy;
        if (cursor.down) {
            bctx.lineTo(cursor.x, cursor.y);
            bctx.stroke();
        }
        ctx.drawImage(bctx.canvas, 0, 0);
        ctx.strokeRect(cursor.x, cursor.y, 1, 1);
        el.scrollLeft = el.scrollTop = 200;
    }
    
    window.onscroll = function() {
        var el = body;
        el.scrollLeft = el.scrollTop = 200;
        window.onscroll = drawScroll;
    };

})();