webpaint.js

// Drawing area
var wbCanvas;
var wbContext;
var left;
var top;
// variables for managing drawing
var started = false;
var dtool = "pencil";
var dcolor = "#000000";
var refX = null;
var refY = null;
var points = [];
// variables for managing text typing
var text = null;
var typing=false;
var textX = null;
var textY = null;

function initCanvas() {
    if (!Modernizr.canvas) {
        return
    } else {
        wbCanvas = document.getElementById("canvas");
        var rect = wbCanvas.getBoundingClientRect();
        left = rect.left;
        top = rect.top;
        console.log("left "+left);
        console.log("top "+top);
        console.log("width "+wbCanvas.width);
        console.log("height="+wbCanvas.height);
        wbContext = wbCanvas.getContext("2d");
        wbContext.strokeStyle = "#000000";
        wbContext.strokeRect(0, 0, wbCanvas.width, wbCanvas.height);

        wbCanvas.addEventListener('mousedown', mouseEventHandler, false);
        wbCanvas.addEventListener('mousemove', mouseEventHandler, false);
        wbCanvas.addEventListener('mouseup',   mouseEventHandler, false);
        document.addEventListener('mousedown', function (event) {
            var point = mouseCoordinates(event);
            var x=point.x, y=point.y;
            if(x<left || x>left+wbCanvas.width){// && y<top+wbCanvas.height) {
                saveText();
                typing = false;
                textX = null;
                textY = null;
            }
        }, false);
    }
}

function getSelectElementValue(id) {
    sElmt = document.getElementById(id);
    return sElmt.options[sElmt.selectedIndex].value;
}

/** Event handlers */

// Called when user type a key from its keyboard
function keyPressHandler(event) {
    if (typing == true) {
        var chCode = ('charCode' in event) ? event.charCode : event.keyCode;
        reDraw();
        text = text + String.fromCharCode(chCode);
        typeText(textX, textY, dcolor, text);
    }
}

// Called when user select a drawing color or a drawing tool
function selectChangeHandler() {
    refX = null;
    refY = null;
    dtool = getSelectElementValue("dtool");
    dcolor = "#"+getSelectElementValue("dcolor");
    // stop typing if it was the previous activity
    if(dtool != "text" && typing==true) {
        typing = false;
        addDrawing({tool:"text", x:textX, y:textY, color:dcolor, text:text});
        text = "";
    }
}

// returns the coordinates (x, y) of a mouse after click event
function mouseCoordinates(event) {
    var x, y;
    // Get the mouse position relative to the canvas element
    if(event.layerX || event.layerX == 0) { //Firefox
        x = event.layerX;
        y = event.layerY;
    } else if (event.offsetX || event.offsetX == 0) { //Opera
        x = event.offsetX;
        y = event.offsetY;
    }
    return {x:x, y:y};
}

function saveText() {
    if(typing==true && text!="") {
        addDrawing({tool:"text", x:textX, y:textY, color:dcolor, text:text});
    }
}

// Called when a mouse event occurs: mouse down/move/up
function mouseEventHandler(event) {
    // Get the mouse position relative to the canvas element
    var point = mouseCoordinates(event);
    var x=point.x, y=point.y;

    // Call the event handler of the tool
    if (event.type == "mousedown") {
        // Called when you start holding down the mouse button, it starts the pencil drawing
        started = true;
        refX = x;
        refY = y;

        if (dtool == "pencil") {
            wbContext.beginPath();
            wbContext.moveTo(x, y);
            addDrawing({tool:dtool, begin:true, color:dcolor, x:x, y:y});

        }else if(dtool == "text") {
            saveText();
            typing=true;
            text = "";
            textX = x;
            textY = y;

        }

    } else if (event.type == "mousemove") {
        // Every time you move the mouse. It draws only if the tool.started state is set to true (when you are holding down the mouse).
        if (started) {
            wbContext.strokeStyle = dcolor;
            if (dtool == "pencil") {
                wbContext.lineTo(x, y);
                wbContext.stroke();
                addDrawing({tool:dtool, begin: false, color:dcolor, x:x, y:y});

            }else if (dtool == "rect" && refX != null && refY != null) {
                reDraw();
                leftCornerX = refX;
                leftCornerY = refY;
                width  = Math.abs(refX - x);
                height = Math.abs(refY - y);
                if (refX > x)
                    leftCornerX = x;
                if (refY > y)
                    leftCornerY = y;
                if(document.getElementById("fill").checked == true) {
                    wbContext.fillStyle = dcolor;
                    wbContext.fillRect(leftCornerX, leftCornerY, width, height);
                }else
                    wbContext.strokeRect(leftCornerX, leftCornerY, width, height);
            }else if (dtool == "circle" && refX != null && refY != null) {
                reDraw();
                var filled = document.getElementById("fill").checked;
                var radius = circleRadius(refX, refY, x, y);
                drawCircle(refX, refY, radius, filled, dcolor);
            }
        }

    } else if(event.type == "mouseup") { // When the mouse is releazed
        if (started) {
            if(dtool == "pencil") {
                wbContext.lineTo(x, y);
                wbContext.stroke();

            }else if(dtool == "rect") {
                reDraw();
                var corner = rectCorner(x, y);
                var filled = document.getElementById("fill").checked;
                if(filled == true) {
                    wbContext.fillStyle = dcolor;
                    wbContext.fillRect(corner.x, corner.y, width, height);
                }else {
                    wbContext.strokeStyle = dcolor;
                    wbContext.strokeRect(corner.x, corner.y, width, height);
                }
                addDrawing({tool:dtool, filled:filled, color:dcolor, x:corner.x, y:corner.y, width: width, height:height});

            }else if(dtool == "circle") {
                reDraw();
                var filled = document.getElementById("fill").checked;
                var radius = circleRadius(refX, refY, x, y);
                drawCircle(refX, refY, radius, filled, dcolor);
                addDrawing({tool:dtool, filled:filled, color:dcolor, x:refX, y:refY, radius:radius});
            }

            started = false;
        }
    }

}

/** Drawing functions */
function typeText(x, y, color, text) {
    wbContext.fillStyle = color;
    wbContext.font = '30px_sans';
    wbContext.textBaseline = 'top';
    wbContext.fillText (text, x, y);
}

function circleRadius(centerX, centerY, x, y) {
    var width  = Math.abs(centerX - x);
    var height = Math.abs(centerY - y);
    var radius = Math.sqrt(width*width+height*height);
    return radius;
}

function drawCircle(centerX, centerY, radius, filled, color) {
    wbContext.beginPath();
    if(filled == true) {
        wbContext.fillStyle = color;
        wbContext.arc(centerX,centerY,radius,0,2*Math.PI);
        wbContext.fill();
    }else {
        wbContext.strokeStyle = color;
        wbContext.arc(centerX,centerY,radius,0,2*Math.PI);
        wbContext.stroke();
    }
}

function rectCorner(x, y) {
    leftCornerX = refX;
    leftCornerY = refY;
    width  = Math.abs(refX - x);
    height = Math.abs(refY - y);
    if (refX > x)
        leftCornerX = x;
    if (refY > y)
        leftCornerY = y;
    return {x: leftCornerX, y: leftCornerY};
}

// add a drawing point (line/rectangle/circle/text) to the list
function addDrawing(point) {
    points.push(point);
}

// Draw a point on the canvas
function displayDrawing(point) {
    if (point.tool == "pencil") {
        if (point.begin == true) {
            wbContext.beginPath();
            wbContext.moveTo(point.x, point.y);
        }else {
            wbContext.strokeStyle = point.color;
            wbContext.lineTo(point.x, point.y);
            wbContext.stroke();
        }

    }else if(point.tool == "rect") {
        if(point.filled == true) {
            wbContext.fillStyle = point.color;
            wbContext.fillRect(point.x, point.y, point.width, point.height);
        }else {
            wbContext.strokeStyle = point.color;
            wbContext.strokeRect(point.x, point.y, point.width, point.height);
        }
    }else if(point.tool == "circle") {
        drawCircle(point.x, point.y, point.radius, point.filled, point.color)

    }else if (point.tool == "text") {
        typeText(point.x, point.y, point.color, point.text);
    }
}

function reDraw() {
    wbContext.fillStyle = "#FFFFFF";
    wbContext.fillRect(0, 0, wbCanvas.width, wbCanvas.height);
    wbContext.strokeStyle = "#000000";
    wbContext.strokeRect(0, 0, wbCanvas.width, wbCanvas.height);
    for(var i=0; i<points.length; i++) {
        var point = points[i];
        displayDrawing(point);
    }
}

// clear (reset) the drawing area
function clear() {
    points = [];
    reDraw();
}