HTML canvas drawImage() Method

Last Updated : 12 Jul, 2025

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>