Menu
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

HTML Canvas Images


HTML Canvas - Draw Image

The drawImage() method draws an image onto the canvas.

The drawImage() method can be used with three different syntaxes:

  • drawImage(image, dx, dy)
  • drawImage(image, dx, dy, dwidth, dheight)
  • drawImage(image, sx, sy, swidth, sheight, dx, dy, dwidth, dheight)

The examples below explain the three different syntaxes.


drawImage(image, dx, dy)

The drawImage(image, dx, dy) syntax positions the image on the canvas.

Example

Draw image in position (10, 10) on the canvas:

Your browser does not support the HTML5 canvas tag.
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const image = document.getElementById("scream");

image.addEventListener("load", (e) => {
  ctx.drawImage(image, 10, 10);
});
</script>
Try it Yourself »

drawImage(image, dx, dy, dwidth, dheight)

The drawImage(image, dx, dy, dwidth, dheight) syntax positions the image on the canvas, and specifies the width and height of the image on the canvas.

Example

Draw image in position (10, 10) on the canvas, with a width and height of 80 pixels:

Your browser does not support the HTML5 canvas tag.
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const image = document.getElementById("scream");

image.addEventListener("load", (e) => {
  ctx.drawImage(image, 10, 10, 80, 80);
});
</script>
Try it Yourself »

drawImage(image, sx, sy, swidth, sheight, dx, dy, dwidth, dheight)

The drawImage(image, sx, sy, swidth, sheight, dx, dy, dwidth, dheight) syntax is used to clip the source image, before it is placed on the canvas.

Example

Here we clip the source image from position (90, 130), with a width of 50 and a height of 60, and then position the clipped part on the canvas in position (10, 10), with a width and height of 150 and 160 pixels (so the clipped source image will also be scaled/stretched:

Your browser does not support the HTML5 canvas tag.
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const image = document.getElementById("scream");

image.addEventListener("load", (e) => {
  ctx.drawImage(image, 90, 130, 50, 60, 10, 10, 150, 160);
});
</script>
Try it Yourself »

Here are the parameters of the drawImage() method:

Parameter Description
image Required. The image to draw into the context
sx Optional. The x-coordinate of the top-left corner of the source image (for clipping the source image)
sy Optional. The y-coordinate of the top-left corner of the source image (for clipping the source image)
swidth Optional. The width of the clipping of the source image, in pixels
sheight Optional. The height of the clipping of the source image, in pixels
dx The x-coordinate in the canvas where to place the top-left corner of the source image
dy The y-coordinate in the canvas where to place the top-left corner of the source image
dwidth Optional. The width to draw the image in the destination canvas. This allows scaling of the image
dheight Optional. The height to draw the image in the destination canvas. This allows scaling of the image

×

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail:
sales@w3schools.com

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail:
help@w3schools.com

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Copyright 1999-2024 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS.