SVG Doodler v0.1

Draws lines, rects, circles and bubbles (small scattered circles) in various colors on a dynamically-generated SVG.

by djwelsh

HTML

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

CSS

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

JavaScript

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

    hueval : 180,
    
    //Elements on page
    cont: null,
    docbody: null,
    svg: null,
    canvas: null,
    cover: null,
    
    currentTool : 'line',
    
    //Stores the current drawing type, color, line thickness etc
    settings : {
        line : {
            desc : 'Freehand Line',
            subs : {
                'stroke' : '#333333',
                'stroke-opacity' : 0.8,
                'stroke-width' : 10,
                'fill' : '#000000',
                'fill-opacity' : 0,
                'stroke-linecap' : 'round',
                'stroke-linejoin' : 'round'
                
            }
        }
    },
    
    
    //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 current shape
    draw: function () {
        //for gradually changing hue
        oO.hueval = (oO.hueval + 5) % 360;
        
        var randx = Math.random() * 20 - 10;
        var randy = Math.random() * 20 - 10;
        //Create requires namespace, but setting attributes does not.
        var circ1 = document.createElementNS(oO.ns, 'circle');
        circ1.setAttribute('cx', oO.currentpos.x +...