The drawImage() method can be used to draw an image at a specific position (x,y) and also scale it to a particular length and width. In this instance, the method will take 5 parameters:
drawImage(Image, x coordinate, y coordinate, width, height)
The width and height are in pixels.
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() {
// The original image is 100 X 100 Pixels. We are scaling it to 200 X 200 pixels.
ctx.drawImage(flower, 10, 10, 200, 200);
}
}
}
</script>
<title>Scale an image on a canvas</title>
</head>
<body onload="init();">
<canvas id="canvas" width="900"
height="500"></canvas><br>
</body>
</html>
