A simple scribbler using <canvas>

Try drawing in the blue rectangle below:

To clear the canvas, reload the page. See also How to clear a <canvas>.

Here is the JavaScript using the <canvas> tag:

/* Keep a record of whether we are drawing a line or not. */

var drawing = false;

/* The drawing context for the canvas. */

var context;

/* Offsets of the canvas, to adjust the coordinates of the event to
 * the canvas's coordinates. */

var offset_left = 0;
var offset_top = 0;

/* Initialize the canvas for drawing. */

function start_canvas ()
{
    var scribbler = document.getElementById ("scribbler");
    context = scribbler.getContext ("2d");
    scribbler.onmousedown = function (event) {mousedown(event)};
    scribbler.onmousemove = function (event) {mousemove(event)};
    scribbler.onmouseup   = function (event) {mouseup(event)};
    for (var o = scribbler; o ; o = o.offsetParent) {
        offset_left += (o.offsetLeft - o.scrollLeft);
        offset_top  += (o.offsetTop - o.scrollTop);
    }
}

/* Get the position of the mouse. */

function getPosition(evt)
{
    evt = (evt) ?  evt : ((event) ? event : null);
    var left = 0;
    var top = 0;
    var scribbler = document.getElementById("scribbler");

    if (evt.pageX) {
        left = evt.pageX;
        top  = evt.pageY;
    } else if (document.documentElement.scrollLeft) {
        left = evt.clientX + document.documentElement.scrollLeft;
        top  = evt.clientY + document.documentElement.scrollTop;
    } else  {
        left = evt.clientX + document.body.scrollLeft;
        top  = evt.clientY + document.body.scrollTop;
    }
    left -= offset_left;
    top -= offset_top;

    return {x : left, y : top}; 
}

/* Make a random colour. */

function random_colour()
{
    var colour = new String();
    for (var i = 0; i < 3; i++) {
        var random16 = Math.floor (Math.random() * 16);
        colour = colour.concat (random16.toString(16).toUpperCase());
    }
    return colour;
}

/* React to a mouse push. */

function
mousedown(event)
{
    drawing = true;
    var location = getPosition(event);
    context.lineWidth = 4.0;
    context.strokeStyle="#"+random_colour();
    context.beginPath();
    context.moveTo(location.x,location.y);
}

/* React to a mouse move. */

function
mousemove(event)
{
    if (!drawing) 
        return;
    var location = getPosition(event);
    context.lineTo(location.x,location.y);
    context.stroke();
}

/* React to a mouse release. */

function
mouseup(event)
{
    if (!drawing) 
        return;
    mousemove(event);
    drawing = false;
}

(download)

It needs the following HTML too:

<html>
<head>
<script type="text/javascript" src="scribbler.js"></script>
<style>
#scribbler { background-color:skyblue; }
</style>
</head>
<body onload='start_canvas ()'>
<canvas width="300" height="300" id="scribbler">
</canvas>
</body>
</html>

You can see a practical example of this in action at this kanji recognition site.

Copyright © Ben Bullock 2009-2024. All rights reserved. For comments, questions, and corrections, please email Ben Bullock (benkasminbullock@gmail.com) or use the discussion group at Google Groups. / Privacy / Disclaimer