+ 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);

16th Mar 2017, 2:14 AM
Sushi_Theif
Sushi_Theif - avatar
6 odpowiedzi
0
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
Hasan Al-Yazidi - avatar
0
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
Aditya kumar pandey - avatar
0
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
Sushi_Theif - avatar
0
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
Aditya kumar pandey - avatar
0
okay makes sense. And im asumming this method should work with Microsoft Edge and Firefox?
16th Mar 2017, 3:07 AM
Sushi_Theif
Sushi_Theif - avatar
0
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
Sushi_Theif - avatar