HTML5/JS Not Rendering Image in Canvas.

Question

I'm working on a web development lab, but my image is not showing up. Is there something I am doing wrong in referencing the image? Here is a link to the image itself: http://tuftsdev.github.com/WebProgramming/assignments/pacman10-hp-sprite.png

Note: I copied the image into my local directory, so I know the the referencing is correct.

 <!DOCTYPE html>
 <html>
 <head>
     <title>Ms. Pacman</title>
     <script>
         function draw() {
             canvas = document.getElementById('simple');

             // Check if canvas is supported on browser
             if (canvas.getContext) {
                ctx = canvas.getContext('2d');
                var img = new Image();
                img.src = '"pacman10-hp-sprite.png';
                ctx.drawImage(img, 10, 10);
             }
             else {
                alert('Sorry, canvas is not supported on your browser!');
             }
       }
     </script>
  </head>

 <body onload="draw();">
     <canvas id="simple" width="800" height="800"></canvas>
 </body>
 </html>

rodrigo-silveira · Accepted Answer · 2013-02-14 16:25:48Z

2

You'll need to set up a callback and draw the image to the canvas once the image has actually loaded:

function draw() {
    canvas = document.getElementById('simple');

    // Check if canvas is supported on browser
    if (canvas.getContext) {
        ctx = canvas.getContext('2d');
        var img = new Image();

        // If you don't set this callback before you assign
        // the img.src, the call ctx.drawImage will have 
        // a null img element. That's why it was failing before
        img.onload = function(){
            ctx.drawImage(this, 10, 10);
        };

        img.src = "pacman10-hp-sprite.png";
    } else {
        alert('Sorry, canvas is not supported on your browser!');
    }
}

answered Feb 14, 2013 at 16:25

rodrigo-silveira

13.1k16 gold badges81 silver badges138 bronze badges

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

Collectives™ on Stack Overflow

HTML5/JS Not Rendering Image in Canvas.

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related