title: Javascript: Drawing rectangle on canvas doesn't work on IE
body: <p>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 for drawing it.</p>
  
  <p>The problem I have is that in Internet Explorer, <code>canvas2.width = canvas2.width</code> doesn't clear the content of canvas2, which is necessary because for every mousemove the rectangle gets drawn again. I also tried <code>context2.clearRect(0,0,canvas2.width,canvas2.height)</code>, but, however, then the preview rectangle doesn't get drawn at all. Try it out on <strong><a href="http://jsfiddle.net/Y389a/2/" rel="nofollow">http://jsfiddle.net/Y389a/2/</a></strong></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;canvas id="canvas" width="600" height="400"&gt;&lt;/canvas&gt;
  &lt;canvas id="canvas2" width="600" height="400" onmouseup="return drawLine()" onmousedown="return startLine()"&gt;&lt;/canvas&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#canvas, #canvas2 {
      position:absolute;
      left:0px;
      top:0px;
      border-width:1px;
      border-style:solid;
      border-color:#666666;
      cursor:default !important;
  }
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>var x; var xStart;
  var y; var yStart;
  var clicked = false;
  
  var canvas = document.getElementById("canvas");
  var context = canvas.getContext("2d");
  var canvas2 = document.getElementById("canvas2");
  var context2 = canvas2.getContext("2d");
  
  context.strokeStyle = "black";
  context.lineCap = "round";
  
  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;
          context2.rect(xStart, yStart, x - xStart, y - yStart);
          context2.stroke();
      }
  }, false);
  
  function startLine() {
      context.beginPath();
      xStart = x; yStart = y;
      clicked = true;
  }
  
  function drawLine() {
      clicked = false;
      context.rect(xStart, yStart, x - xStart, y - yStart);
      context.stroke();
  }
  </code></pre>
  
  <p><strong><a href="http://jsfiddle.net/Y389a/2/" rel="nofollow">Preview</a></strong></p>