+ 1

Chrome browser doesn't allow images to be placed on a HTML canvas?

trying to insert an image onto my canvas so I can use it as a sprite for a game. Here is what I have so far .......................html........................................ <!DOCTYPE html> <html> <head> <title>SPACE</title> <link rel="stylesheet" href="space.css"> </head> <body> <canvas id="myCanvas" width="1800" height="900"> <img src="Rocket.png" id="ship"/> </canvas> <script src="space.js"> </body> </html> ..........................................CSS................................... canvas{ background-color:#eee; } .......................................JavaScript...................................... var canvas = document.getElementById("myCanvas"); var img=document.getElementById("ship"); var ctx = canvas.getContext("2d"); function draw(){ ctx.clearRect(0,0,canvas.width,canvas.height); ctx.drawImage(img,10,10,120,141); }; setInterval(draw,10);

javascript html5 css3

16th Mar 2017, 2:14 AM

Sushi_Theif

6 Answers

you need JavaScript to render that image on the canvas, do not put the img tag inside canvas tag

16th Mar 2017, 2:54 AM

Hasan Al-Yazidi

Its a bug in chrome, you can get it by function readImage() { var img = document.createElement('img'); c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); img.onload = function() { ctx.drawImage(img,0,0); }; img.src = "img/1.jpg"; } window.onload = readImage; Open your account on GitHub, and watch chrome project. You will aware of any new bug in chrome, browser. Hope it helps you.

16th Mar 2017, 2:55 AM

Aditya kumar pandey

Okay thanks Aditya, ill take a look, this is really helpful. Also, Hasan, so i dont use an image tag in html at all? instead, ill call to the picture soley through javascript or just move img tag outside canvas tag in html?

16th Mar 2017, 3:02 AM

Sushi_Theif

Canvas, will not draw image using html. Putting IMG tag in canvas does not do anything. You have to use JavaScript, to tell browser to show image in canvas

16th Mar 2017, 3:05 AM

Aditya kumar pandey

okay makes sense. And im asumming this method should work with Microsoft Edge and Firefox?

16th Mar 2017, 3:07 AM

Sushi_Theif

So I thought I would post an update. I tried your method above Aditya and it just does not want to work with Chrome or Firefox. It works with Edge though, but so did the first method I tried. Maybe different operating system browser versions don't work the same. I have not only tried your method Aditya, but I have tried many other methods I found on the google and nothing seems to work with chrome. Maybe my chrome needs updated..

16th Mar 2017, 6:24 PM

Sushi_Theif