Hello I am trying to draw an image on canvas below is my html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-type" content="image/png"; charset="UTF-8">
<img class="single-image" src="https://www.google.com/imgres?imgurl=http%3A%2F%2Fs3.amazonaws.com%2Fpix.iemoji.com%2Fimages%2Femoji%2Fapple%2Fios-12%2F256%2Fneutral-face.png&imgrefurl=http%3A%2F%2Fwww.iemoji.com%2Fview%2Femoji%2F821%2Fsmileys-people%2Fneutral-face&tbnid=AJSgSdgVIo5bRM&vet=12ahUKEwj7mKHix93zAhW3gv0HHSCjAUQQMygAegUIARCNAQ..i&docid=xAafOcEIRf_eyM&w=256&h=256&q=neutral%20emoji&hl=el&ved=2ahUKEwj7mKHix93zAhW3gv0HHSCjAUQQMygAegUIARCNAQ" />
</head>
<body>
<canvas width="320" height="320"></canvas>
</body>
</html>
and here is my js code:
function copyImageToCanvas() {
var image = document.querySelector("img");
var canvas = document.querySelector("canvas");
var ctx = canvas.getContext("2d");
ctx.drawImage(
image, 0, 0
)
}
setTimeout(() => {
copyImageToCanvas();
}, 300)
When I load the html page on live server I get the following warning and just an image icon like below: enter image description here
Any help would be appreciated I can't find a solution for that is the problem the warning or I load the image the wrong way?
try to use the actual link of the image instead. In this case:
<img class="single-image" src="http://s3.amazonaws.com/pix.iemoji.com/images/emoji/apple/ios-12/256/neutral-face.png" />
The way to find out is right click on the image and select "Open Image in New Tab". You'll find the actual link of the image in your browser's address bar.
Note: I don't know why you put your <img/> tag inside the <head/>, because it won't work. Please put it in the <body/> tag. If you wanna put your canvas on top of the image, please refer to this answer.