Skip to content
Related Articles

Related Articles

Improve Article
HTML | canvas drawImage() Method
  • Last Updated : 09 Jun, 2021

In HTML5, canvas drawImage() function is used to display an image or video on canvas. This function can be used to display the whole image or just a small part of the image. But, image has to be loaded first to load it further on canvas. 

Syntax: 

context.drawImage(img, x, y, swidth, sheight, sx, sy, width, height);

Parameter Values:  

  • img: It indicates the image or video to draw on canvas.
  • x: It indicates the x-coordinate where image has to be placed.
  • y: It indicates the y-coordinate where image has to be placed.
  • swidth: It is optional parameter and indicates the width of the clipped image.
  • sheight: It is optional parameter and indicates the height of the clipped image.
  • sx: It is optional parameter and indicates x-coordinate where to start the clipping.
  • sy: It is optional parameter and indicates y-coordinate where to start the clipping.
  • width: It is optional parameter and indicates the width of the image to use.
  • height: It is optional parameter and indicates the height of the image to use.

Example:  

HTML






<!DOCTYPE html>
<html>
 
<head>
    <title>
        HTML | canvas drawImage() Method
    </title>
</head>
 
<body>
     
<p>Image:</p>
 
    <img id="GFG" width="480" height="240"
        src="canvas drawImage.png" alt="The Scream" />
 
     
<p>Canvas:</p>
 
 
    <canvas id="myGFGCanvas" width="520" height="300"
            style="border: 1px solid #d3d3d3;">
        Your browser is not supported
        for HTML5 canvas tag.
    </canvas>
 
    <script>
        window.onload = function () {
            var c = document.getElementById("myGFGCanvas");
            var ctx = c.getContext("2d");
            var img = document.getElementById("GFG");
            ctx.drawImage(img, 20, 20);
        };
    </script>
</body>
 
</html>

Output: 

 




My Personal Notes arrow_drop_up
Recommended Articles
Page :