Drawing Images with drawImage
Once we have a reference to our source image object we can use the drawImage method to render it to the canvas. As we we’ll see later the drawImage method is overloaded and has three different variants. In its most basic form it looks like this.
drawImage(image, x, y)
Where image is a reference to our image or canvas object. x and y form the coordinate on the target canvas where our image should be placed.
Example
<!DOCTYPE HTML>
<html>
<head>
<title>Canvas tutorial</title>
<script>
function draw(){
var ctx = document.getElementById('canvas').getContext('2d');
var img = new Image();
img.onload = function(){
ctx.drawImage(img, 0, 0);
ctx.beginPath();
ctx.moveTo(30, 96);
ctx.lineTo(70, 66);
ctx.lineTo(103, 76);
ctx.lineTo(170, 15);
ctx.stroke();
};
img.src = 'sampleImage.png';
}
</script>
</head>
<body onload="draw();">
<canvas id="canvas" width="200" height="200">
</canvas>
</body>
</html>
