Javascript: Drawing Rectangle On Canvas Doesn't Work On IE

I have a web application where you can draw a rectangle on a canvas. I use two canvas elements: one for the preview while drawing and another one laying exactly under the other one

Solution 1:

Problem

You are drawing rectangles with context2.rect which is a path command.

Path commands are "remembered" by the canvas until a new context2.beginPath is issued

Therefore, all your previous rects are being remembered and redrawn when you do context2.stroke

Fix

Just put context2.beginPath in your mousemove event handler: http://jsfiddle.net/m1erickson/A8ge6/

canvas2.addEventListener("mousedown",startLine);
canvas2.addEventListener("mouseup",drawLine);
    canvas2.addEventListener('mousemove', function (evt) {
        var rect = canvas2.getBoundingClientRect();
        x = evt.clientX - rect.left;
        y = evt.clientY - rect.top;
        if (clicked) {
            canvas2.width = canvas2.width;
            console.log(xStart);

            // add beginPath so previous context2.rect's are dismissed
            context2.beginPath();

            context2.rect(xStart, yStart, x - xStart, y - yStart);
            context2.stroke();
        }
    }, false);

Solution 2:

There is Nothing Wrong with the Code and nothing Wrong With IE 9,What you missed is a l'le concept ,

addEventListener() didn't work For IE instead you have to use attachEvent() for it to make your Code run in IE

//For your code to work in IE
if (!canvas2.addEventListener) {
canvas2.attachEvent("onclick", CanvasFunction);
}
//for rest of the Browser
else {
canvas2.addEventListener("click", CanvasFunction, false);
}

function CanvasFunction(evt)
{
var rect = canvas2.getBoundingClientRect();
    x = evt.clientX - rect.left;
    y = evt.clientY - rect.top;
    if (clicked) {
        canvas2.width = canvas2.width;
        console.log(xStart);

        // add beginPath so previous context2.rect's are dismissed
        context2.beginPath();

        context2.rect(xStart, yStart, x - xStart, y - yStart);
        context2.stroke();
    }
}

Playing with Canvas ,remember IE doesn't support addEventListners ..Enjoy Coding