How to use the canvas drawImage() method in HTML5 ?

02 Sep, 2020
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 image using the <img> tag.
Draw the canvas using <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
<!DOCTYPE html><html>  <body>    <h1 style="color: green;">        GeeksforGeeks    </h1>      <p>Image:</p>      <img id="gfg_image" src="https://media.geeksforgeeks.org/wp-content/uploads/20200604000733/gfg199.png" />      <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></body>  </html>
Output:
Example 2: In this example, the position and dimensions of the image is set using additional parameters.
HTML
<!DOCTYPE html><html>  <body>    <h1 style="color: green;">        GeeksforGeeks    </h1>      <p>Image:</p>      <img id="gfg_image" src="https://media.geeksforgeeks.org/wp-content/uploads/20200604000733/gfg199.png" />      <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></body>  </html>
CSS-Misc
HTML-Canvas
HTML-Misc
JavaScript-Misc
HTML
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
REST API (Introduction)
CSS to put icon inside an input element in a form
Types of CSS (Cascading Style Sheet)
HTTP headers | Content-Type
Design a Tribute Page using HTML & CSS
Remove elements from a JavaScript Array
How to Open URL in New Tab using JavaScript ?
File uploading in React.js
How to execute PHP code using command line ?
How to get character array from string in JavaScript?