How to use the canvas drawImage() method in HTML5 ?
Last Updated :
18 Jan, 2023
The canvas drawImage() method of the Canvas 2D API is used to draw an image in various ways on a canvas element. This method has additional parameters that can be used to display the image or a part of the image.
Syntax:
context.drawImage(img, x, y, swidth, sheight, sx, sy, width, height);
Approach:
- Add an image using the <img> tag.
- Draw the canvas using the <canvas> tag.
- Load the canvas and get the context.
- Select the image to be used,
- Draw the image along with additional optional parameters, if required.
Example 1: In this example, the position of the image in the canvas is set using additional parameters.
html
< h1 style = "color: green;" >
GeeksforGeeks
</ h1 >
< p >Image:</ p >
< img id = "gfg_image"
src =
< p >Canvas:</ p >
< canvas id = "myGFGCanvas" width = "500" height = "300"
style = "border: 5px solid black" >
</ canvas >
< script >
window.onload = function () {
// Get the canvas element from the page
var canvas = document.getElementById("myGFGCanvas");
// Get the 2D context of the canvas
var ctx = canvas.getContext("2d");
// Get the image to be drawn on the canvas
var image = document.getElementById("gfg_image");
// Draw the image using drawImage() function
// The first parameter is the image to be drawn
// The second and third parameter is the
// x and y position of the image in the canvas
ctx.drawImage(image, 100, 20);
};
</ script >
|
Output:
Example 2: In this example, the position and dimensions of the image are set using additional parameters.
HTML
< h1 style = "color: green;" >
GeeksforGeeks
</ h1 >
< p >Image:</ p >
< img id = "gfg_image"
src =
< p >Canvas:</ p >
< canvas id = "myGFGCanvas" width = "500"
height = "300"
style = "border: 5px solid black" >
</ canvas >
< script >
window.onload = function () {
// Get the canvas element from the page
var canvas = document.getElementById("myGFGCanvas");
// Get the 2D context of the canvas
var ctx = canvas.getContext("2d");
// Get the image to be drawn on the canvas
var image = document.getElementById("gfg_image");
// Draw the image using drawImage() function
// The first parameter is the image to be drawn
// The second and third parameter is the
// x and y position of the image in the canvas
// The fourth and fifth parameter is the
// width and height of the image to be drawn
// in the canvas
ctx.drawImage(image, 20, 20, 400, 200);
};
</ script >
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...