How to add image on a JavaScript canvas?

Question

here is what i have created

https://code.sololearn.com/WsH7zow7Td44/?ref=app

the image in <img> tag works fine
the border of the canvas is shown (implying that canvas is loaded )
but the onLoad= function() never gets triggered

please help

Answer 1

<script>

var canvas = document.getElementById("canv")

var draw = canvas.getContext("2d");

var img = new Image();
img.src = "http://www.sololearn.com/images/tree.jpg"

img.onload= function(){
alert("loaded")
draw.drawImage( img , 500, 200 )
}
</script>

Answer 2

corrections:
1. getContext(" 2d ") -> getContext("2d")
2. img.source -> img.src
3. onLoad -> onload

Answer 3

That is very bad practice,creating an img tag to work with canvas.javascript has its inbuilt way of doing rendering images
var img=new Image();
img.src="http:link.com"
Now draw the image with canvas

Answer 4

wonderful!!
thankyou so much guys..