HTML Canvas Image

Canvas - Image

To draw an image on the canvas, use the following method:

  • drawImage(image,x,y)

Example

Tulip

JavaScript:

window.onload = function() {
  const canvas = document.getElementById("myCanvas");
  const ctx = canvas.getContext("2d");
  const img = document.getElementById("tulip");
  ctx.drawImage(img, 10, 10);
}

Try It Yourself

See also:

Complete Canvas Reference Manual of CodeW3C.com