Jambutters Posted April 12, 2016 Share Posted April 12, 2016 <!doctype html> <canvas id = 'ctx' width = '416' height = '416' style = 'border:1px solid #000000;'></canvas> <script> var ctx = document.getElementById('ctx').getContext('2d'); var imageCont = {}; imageCont.player = new Image(); imageCont.player.src = 'src/cindy.png'; function draw (){ ctx.drawImage(imageCont.player, 0, 0, 32, 32, 0, 0, 32, 32); } draw(); </script> This should work although I do not know why it doesn't. I am using brackets so no need for a webserver therefore the file permissions is not the problem , and the path for the sprite is valid but it still won't draw on the screen, also, no error log is displayed either in the console. Sorry for this super newbie question Quote Link to comment Share on other sites More sharing options...
bubamara Posted April 12, 2016 Share Posted April 12, 2016 wait for image to load, then call draw imageCont.player.onload = draw; EDIT: forgot to mention that you need to define onload before you actually start loading image (assigning src) var imageCont = {}; imageCont.player = new Image(); imageCont.player.onload = draw; imageCont.player.src = 'src/cindy.png'; Quote Link to comment Share on other sites More sharing options...
Jambutters Posted April 12, 2016 Author Share Posted April 12, 2016 1 hour ago, bubamara said: wait for image to load, then call draw imageCont.player.onload = draw; EDIT: forgot to mention that you need to define onload before you actually start loading image (assigning src) var imageCont = {}; imageCont.player = new Image(); imageCont.player.onload = draw; imageCont.player.src = 'src/cindy.png'; OHHHH, that explains a lot.... I didn't think onload was nessicary , Thanks! Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.