title: HTML5 Canvas - image not working/showing up in ie10
body: <p>I have just started looking into html5 and the canvas element and have been trying to create a simple page that rotates an image clockwise and anti clockwise on button clicks. I managed to get something working but i tested it on ie10 and the image is not showing up, just the blank grey canvas. I can only test on ie10 so not sure if this effects other versions too. My full code is:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;!-- Canvas Element --&gt;
  &lt;canvas id="canvas" width="500" height="500" style="background-color: #EAEAEA;"&gt;
  &lt;/canvas&gt; 
  
  &lt;!-- Rotate Buttons --&gt;
  &lt;h2&gt;Rotate&lt;/h2&gt;
  &lt;button onclick="rotate('c')"&gt;Clockwise&lt;/button&gt;
  &lt;button onclick="rotate('a')"&gt;Anti-Clockwise&lt;/button&gt;
  &lt;button onclick="rotate('r')"&gt;Reset&lt;/button&gt;
  
  &lt;script type="text/javascript"&gt;
      const FPS = 30;
      var imagePosX = 90;
      var imagePosY = 143;
      var imageRot = 0;
      var image = new Image();
      image.src = "sample.jpg";
  
      var canvas = null;
      var context2D = null;
  
      window.onload = startup;
  
      function startup(){
          canvas = document.getElementById('canvas');
          context2D = canvas.getContext('2d');
          setInterval(draw, 500 / FPS);
      }
  
      function rotate(d){
          setInterval(draw(d), 500 / FPS);
      }
  
      function draw(d){
       if (d=='a'){imageRot -= 10;}
       if (d=='c'){imageRot += 10;}
       if (d=='r'){imageRot = 0;}
       context2D.clearRect(0, 0, canvas.width, canvas.height);
       context2D.save();
       context2D.translate(imagePosX+(image.width/2), imagePosY+(image.height/2));
       context2D.rotate(imageRot * Math.PI / 180);
       // optional shadow
       context2D.shadowBlur = 15;  
       context2D.shadowColor = "rgb(0, 0, 0)";
       //
       context2D.drawImage(image, 0, 0, image.width, image.height, -(image.width/2), -(image.height/2), image.width, image.height);
       context2D.restore();
      }
  &lt;/script&gt; 
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Screenshot of how it should look (and looks in chrome/safari/firefox etc):</p>
  
  <p><a href="https://i.stack.imgur.com/I3460.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/I3460.png" alt="other browsers"></a>
  </p>
  
  <p>Screenshot for ie10:</p>
  
  <p><a href="https://i.stack.imgur.com/GjMCx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GjMCx.png" alt="ie10"></a>
  </p>
  
  <p>Can anyone help with what is causing this?</p>