Edit in JSFiddle

var oO = {
    //SVG namespace
    ns: 'http://www.w3.org/2000/svg',


    //Elements on page
    cont: null,
    docbody: null,
    svg: null,
    canvas: null,
    cover: null,

    //Adjustment of mouse position depending on window size, margins etc.
    offsetX: 0,
    offsetY: 0,
    getOffset: function (foo) {
        var curleft = 0;
        var curtop = 0;

        for (var obj = foo; obj !== null; obj = obj.offsetParent) {
            curleft += obj.offsetLeft;
            curtop += obj.offsetTop;

        }
        oO.offsetX = curleft;
        oO.offsetY = curtop;

    },

    //Current mouse position relative to the #canvas
    currentpos: {
        x: 0,
        y: 0
    },

    //Boolean to determine whether to convert mouse movement to drawing or not
    drawing: false,
    //Stores the Interval we use while drawing
    drawping: null,
    killDrawing: function () {
        oO.drawing = false;
        clearInterval(oO.drawping);
        oO.drawping = null;
    },

    //Fired about a hundred times a second, draws random color/size circles
    drawSprinkles: function () {
        //Create requires namespace, but setting attributes does not.
        var circ1 = document.createElementNS(oO.ns, 'circle');
        circ1.setAttribute('cx', oO.currentpos.x);
        circ1.setAttribute('cy', oO.currentpos.y);
        circ1.setAttribute('r', Math.ceil(10 * Math.random()));
        circ1.setAttribute('stroke', "#000000");
        circ1.setAttribute('stroke-opacity', "0");
        circ1.setAttribute('stroke-width', "1");
        var rgbval = "rgb(" + 
            Math.floor(255 * Math.random()) + "," + 
            Math.floor(255 * Math.random()) + "," + 
            Math.floor(255 * Math.random()) + ")";
        circ1.setAttribute('fill', rgbval);

        oO.svg.appendChild(circ1);

    }

};


$(function () {

    oO.cont = document.getElementById('djw-cont');
    oO.docbody = $(oO.cont).closest('body')[0];

    //Fixed div for debugging
    oO.debug = document.getElementById('djw-debug');



    //Track whether the mouse button is depressed or not.
    oO.mouseDown = 0;
    oO.docbody.onmousedown = function () {
        oO.mouseDown = 1;
        $(oO.debug).css('background-color', 'palegoldenrod')
    };
    oO.docbody.onmouseup = function () {
        oO.mouseDown = 0;
        $(oO.debug).css('background-color', 'white');

        oO.killDrawing();
    };
    //If we mouseover the body it means we have left the canvas, so trigger mousebutton release.
    oO.docbody.onmouseover = function (event) {
        if (!event) event = window.event;
        if (oO.mouseDown == 1) {
            oO.mouseDown = 0;
        }

        oO.killDrawing();

    };

    //Append SVG element to #canvas div.
    oO.svg = document.createElementNS(oO.ns, 'svg');
        oO.svg.setAttribute('width', "100%");
        oO.svg.setAttribute('height', "100%");
    oO.canvas = document.getElementById('djw-canvas');
    oO.canvas.appendChild(oO.svg);
    oO.cover = document.getElementById('djw-cover');

    //When mouse enters #canvas, get offset in preparation for drawing.
    oO.cover.onmouseover = function (event) {
        if (!event) event = window.event;
        oO.getOffset(this);
    };
    //When the mouse is depressed, enable drawing
    oO.cover.onmousedown = function (event) {
        if (!event) event = window.event;
        event.cancelBubble = true;
        if (event.stopPropagation) event.stopPropagation();
        event.preventDefault();
        
        oO.mouseDown = 1;
        oO.drawing = true;
        if (!oO.drawping) {
            oO.drawping = setInterval(oO.drawSprinkles, 20);
        }
    };
    //When mouse leaves canvas, quit drawing
    oO.cover.onmouseout = function (event) {
        
        if (!event) var event = window.event;
        
        var reltg = (event.relatedTarget) ? event.relatedTarget : event.toElement;
        while (reltg.tagName != 'BODY'){
            if (reltg.getAttribute('id') == this.getAttribute('id')){
                return false;
            }
            reltg = reltg.parentNode;
        }
        
        oO.mouseDown = 0;
//alert('mouse is out!')
        oO.killDrawing();
    };
    //When mouse is released on canvas, quit drawing
    oO.cover.onmouseup = function (event) {
        if (!event) event = window.event;
        oO.mouseDown = 0;
//alert('mouse is up!')
        oO.killDrawing();
    };
    //If drawing is enabled, update the mouse position
    oO.cover.onmousemove = function (event) {
        if (!event) var event = window.event;
        /*
        
        var tg = (window.event) ? event.srcElement : event.target;
        if (tg.nodeName != 'DIV') return;
        var reltg = (event.relatedTarget) ? event.relatedTarget : event.toElement;
        while (reltg != tg && reltg.nodeName != 'BODY')
            reltg= reltg.parentNode
        if (reltg== tg) return;
        // Mouseout took place when mouse actually left layer
        // Handle event
        */
        oO.currentpos.x = event.pageX - oO.offsetX;
        oO.currentpos.y = event.pageY - oO.offsetY;
        oO.debug.innerHTML = 'x: ' + event.pageX + ' - ' + oO.offsetX + ' = <b>' + oO.currentpos.x + '</b>, y:' + event.pageY + ' - ' + oO.offsetY + ' = <b>' + oO.currentpos.y + '</b>';
        
    };


});

<div id="djw-cont">
    <div id="djw-controls"></div>
    <div id="djw-canvas"></div>
    <div id="djw-cover"></div>
</div>
<div id="djw-debug"></div>

#djw-debug {
    position: fixed;
    width: 500px;
    height: 50px;
    bottom: 0px auto;
    left: 0px;
}
#djw-cont {
    position: relative;
    width: 500px;
    height: 400px;
    margin: 10px auto;
    outline: 1px dashed #ccc;
}
#djw-controls {
    position: absolute;
    width: 50px;
    height: 400px;
    top: 0px;
    left: 0px;
    background-color: #eee;
}
#djw-canvas {
    position: absolute;
    width: 450px;
    height: 400px;
    top: 0px;
    left: 50px;
    background-color: whitesmoke;
}
#djw-cover {
    position: absolute;
    width: 450px;
    height: 400px;
    top: 0px;
    left: 50px;
    background-color: transparent;
    background-image: url('http://www.davidjohnwelsh.com/img/clearbg.png');
    cursor: crosshair;
}