Falcon80 Logo
Drawing images on canvas
The drawImage() method can be used to draw an image on a canvas at a specific position (x,y). If you simply want to draw the image on the canvas without any scaling or tranformation, then you need to pass only 3 parameters to the method drawImage.

drawImage(Image, x coordinate, y coordinate)

First, create a new image object within your javascript function. Provide the source directory of the image. It is important to make sure that the image is loaded before you draw it on the canvas using the drawImage function. Using the 'drawImage' function within 'onload' will take care of this.

  <script type="application/javascript">
function init() {
var canvas = document.getElementById("canvas");
if (canvas.getContext)
var ctx = canvas.getContext("2d");

// Create a new image object.
var flower = new Image();

//Provide the source directory of the image you are about to upload.
flower.src = "flower.png";

// Make sure the image is loaded before you draw it on the canvas.
flower.onload = function() {
// Draw the image at location (0,0) on the canvas.
ctx.drawImage(flower, 10, 10);

<body onload="init();">
<canvas id="canvas" width="900" height="500"></canvas><br>
Try Code