javascript - HTML5/JS Not Rendering Image in Canvas. -
i'm working on web development lab, image not showing up. there doing wrong in referencing image? here link image itself: http://tuftsdev.github.com/webprogramming/assignments/pacman10-hp-sprite.png
note: copied image local directory, know the referencing correct.
<!doctype html> <html> <head> <title>ms. pacman</title> <script> function draw() { canvas = document.getelementbyid('simple'); // check if canvas 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 not supported on browser!'); } } </script> </head> <body onload="draw();"> <canvas id="simple" width="800" height="800"></canvas> </body> </html>
you'll need set callback , draw image canvas 1 time image has loaded:
function draw() { canvas = document.getelementbyid('simple'); // check if canvas supported on browser if (canvas.getcontext) { ctx = canvas.getcontext('2d'); var img = new image(); // if don't set callback before assign // img.src, phone call ctx.drawimage have // null img element. that's why failing before img.onload = function(){ ctx.drawimage(this, 10, 10); }; img.src = "pacman10-hp-sprite.png"; } else { alert('sorry, canvas not supported on browser!'); } } javascript html html5
No comments:
Post a Comment