Menu
I am reading through "Making Isometric Social Real-Time Games with HTML5, CSS3 and Javascript."
I am not far into it, and I have run into a canvas problem that has ahd me stumped for most of the day.
drawImage() does not seem to be drawing. I have researched the issue and have tried many permutations of pre-loading the image, but so far nothing is working.
Here is my code:
HTML:
<canvas id="game" width="100" height="100"> Your browser doesn't include support for the canvas element. </canvas> CSS:
html { height:100%; overflow:hidden } body { margin:0px; padding:0px; height:100%; } and js:
window.onload = function() { var canvas = document.getElementById('game'); canvas.width=document.body.clientWidth; canvas.height=document.body.clientHeight; var c = canvas.getContext('2d'); function showIntro() { var phrase = "Click or tap screen to start"; c.clearRect (0, 0, canvas.width, canvas.height); var grd = c.createLinearGradient(0, 0, canvas.width, canvas.height); grd.addColorStop(0, "#9db7a0"); grd.addColorStop(1, "#e6e6e6"); c.fillStyle = grd; c.fillRect (0, 0, canvas.width, canvas.height); var logoImg = new Image(); logoImg.src = '../img/logo.png'; var originalWidth = logoImg.width; logoImg.width = Math.round((50 * document.body.clientWidth) / 100); logoImg.height = Math.round((logoImg.width * logoImg.height) / originalWidth); var logo = { img: logoImg, x: (canvas.width/2) - (logoImg.width/2), y: (canvas.height/2) - (logoImg.height/2) } c.drawImage(logo.img, logo.x, logo.y, logo.img.width, logo.img.height); c.font = "bold 16px sans-serif"; var mt = c.measureText(phrase); var xcoord = (canvas.width / 2 ) - (mt.width / 2); c.fillStyle = '#656565' c.fillText (phrase, xcoord, 30); } showIntro(); } Any help would be appreciated!
354
The drawImage() method is a method from the Canvas API that allows you to add an image into your <canvas> element. Just like the fillRect() method, the drawImage() method is a part of Canvas 2D API, so you need to get the Context object of your <canvas> element first and call the method from there.
You almost have it...
You just have to give the image time to load before drawing it.
You give an image time to load with this code:
var logoImg = new Image(); logoImg.onload = function() { // At this point, the image is fully loaded // So do your thing! }; logoImg.src = "myPic.png"; Here is complete code and a Fiddle: http://jsfiddle.net/m1erickson/GKK39/
<!doctype html> <html> <head> <link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> <style> body{ background-color: ivory; } canvas{border:1px solid red;} </style> <script> $(function(){ var canvas=document.getElementById("canvas"); var c=canvas.getContext("2d"); function showIntro() { var phrase = "Click or tap screen to start"; var logoImg=new Image(); logoImg.onload=function(){ c.clearRect (0, 0, canvas.width, canvas.height); var grd = c.createLinearGradient(0, 0, canvas.width, canvas.height); grd.addColorStop(0, "#9db7a0"); grd.addColorStop(1, "#e6e6e6"); c.fillStyle = grd; c.fillRect (0, 0, canvas.width, canvas.height); var originalWidth = logoImg.width; logoImg.width = Math.round((50 * document.body.clientWidth) / 100); logoImg.height = Math.round((logoImg.width * logoImg.height) / originalWidth); var logo = { img: logoImg, x: (canvas.width/2) - (logoImg.width/2), y: (canvas.height/2) - (logoImg.height/2) } c.drawImage(logo.img, logo.x, logo.y, logo.img.width, logo.img.height); c.font = "bold 16px sans-serif"; var mt = c.measureText(phrase); var xcoord = (canvas.width / 2 ) - (mt.width / 2); c.fillStyle = '#656565' c.fillText (phrase, xcoord, 30); } logoImg.src="http://dl.dropbox.com/u/139992952/car.png"; } showIntro(); }); // end $(function(){}); </script> </head> <body> <canvas id="canvas" width=300 height=300></canvas> </body> </html> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
