HTML5 Canvas with Javascript , Image loading

Question

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Web Game </title>
</head>
<body onkeydown="keyDown(event)" onkeyup="keyUp(event)"></body>
    <canvas id="gameCanvas1" width=600 height=400 style ="position:absoloute:top:0;left:0;background-image:url('img/background.jpg')">
        Please upgrade your browser to support HTML5.<br/> 
        One recommendation is to install the latest Chrome or Firefox.
    </canvas>


  <script>
   gamecanvas = document.getElementById("gamecanvas1");
   ctx=gamecanvas.getContext("2d");

  var img = new Image();
  img.src = "img/left.png";


  //MainLoop
  MainLoop();
  function MainLoop(){
    grafx.drawImage(img,0,0)};

  setTimeout(MainLoop, 1000/60); //about 60fps
  }
  </script>


</html>

I am trying to load the left.png image. I am making a basic platformer in HTML and JavaScript, but the image isn't being shown. I think the drawImage is being called before the image is loaded but I'm not sure how to fix it. Thanks.

Vijay · Accepted Answer · 2015-04-21 09:44:07Z

1

There are two problems I found.

P1:

grafx.drawImage(img,0,0)}; is wrong

it should be

ctx.drawImage(img,0,0);

P2: use image onload callback rather than setTimeout.

img.onload = function () {
   ctx.drawImage(img,0,0);
};

answered Apr 21, 2015 at 9:44

Vijay

3,0231 gold badge17 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

atmd · Accepted Answer · 2015-04-21 09:41:41Z

0

You have several errors in your js code.

your element has an id of gameCanvas1, but you are trying to get an element with an id of gamecanvas1 (document.getElementById("gamecanvas1");)

So the javascript wont find your canvas, which means the image wont be drawn. You also have an extra closing } which is causing errors in your function

Try opening your browsers dev console, you'll see the issues

answered Apr 21, 2015 at 9:41

atmd

7,5003 gold badges35 silver badges64 bronze badges

Comments

Shelly · Accepted Answer · 2015-04-21 18:57:38Z

   <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Web Game </title>
    </head>
    <body onkeydown="keyDown(event)" onkeyup="keyUp(event)"></body>

        <canvas id="gameCanvas1" width=600 height=400 style ="position:absoloute:top:0;left:0;background-image:url('img/background.jpg')">
            Please upgrade your browser to support HTML5.<br/> 
            One recommendation is to install the latest Chrome or Firefox.
        </canvas>


      <script>
       console.log("i am here ");
       var gamecanvas = document.getElementById('gameCanvas1');
       var ctx=gamecanvas.getContext('2d');

       var img = new Image();
       img.src = "img/left.png";


       //MainLoop
       MainLoop();
        function MainLoop(){

        ctx.drawImage(img, 10, 10);
        setTimeout(function(){
          MainLoop();
          }, 1000/60); //about 60fps
      }
      </script>


    </html>

Collectives™ on Stack Overflow

HTML5 Canvas with Javascript , Image loading

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related