Search code examples
htmlinternet-explorercanvasinternet-explorer-10

HTML5 Canvas - image not working/showing up in ie10

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:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</head>
<body>
<!-- Canvas Element -->
<canvas id="canvas" width="500" height="500" style="background-color: #EAEAEA;">
</canvas> 

<!-- Rotate Buttons -->
<h2>Rotate</h2>
<button onclick="rotate('c')">Clockwise</button>
<button onclick="rotate('a')">Anti-Clockwise</button>
<button onclick="rotate('r')">Reset</button>

<script type="text/javascript">
    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();
    }
</script> 
</body>
</html>

Screenshot of how it should look (and looks in chrome/safari/firefox etc):

other browsers

Screenshot for ie10:

ie10

Can anyone help with what is causing this?

Solution

  • IE 10 doesn't support const. Change it to var. That at least will be one reason for it not working.

    Also, the debugger (which is not that amazing in IE10) is still your friend. We'll call him 'semi-friend'. Use him. What does he say?