The drawImage() method can be used to draw an image on a canvas
at a specific position (x,y). If you simply want to draw the image on the canvas
without any scaling or tranformation, then you need to pass only 3 parameters to
the method drawImage.
drawImage(Image, x coordinate, y coordinate)
First, create a new image object within your javascript function.
Provide the source directory of the image. It is important to make sure that the
image is loaded before you draw it on the canvas using the drawImage function. Using
the 'drawImage' function within 'onload' will take care of this.
HTML Code
<html>
<head>
<script type="application/javascript">
function init() {
var canvas = document.getElementById("canvas");
if (canvas.getContext)
{
var ctx = canvas.getContext("2d");
// Create a new image object.
var flower = new Image();
//Provide the source directory of the image you are about to upload.
flower.src = "flower.png";
// Make sure the image is loaded before you draw it on the canvas.
flower.onload = function() {
// Draw the image at location (0,0) on the canvas.
ctx.drawImage(flower, 10, 10);
}
}
}
</script>
</head>
<body onload="init();">
<canvas id="canvas" width="900"
height="500"></canvas><br>
</body>
</html>
