[removed] Drawing rectangle on canvas doesn't work on IE

Question

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 ot

Answer 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);