DRAW AN IMAGE ON HTML5 CANVAS?

DRAW AN IMAGE ON HTML5 CANVAS

Use HTML5 canvas’ drawImage method in JavaScript.

Discussion

To draw an image using HTML5 Canvas, we can use the drawImage() method which requires an image object and a destination point. The destination point defines the top left corner of the image relative to the top left corner of the canvas.

Since the drawImage() method requires an image object, we must first create an image and wait for it to load before instantiating drawImage(). We can accomplish this by using the onload property of the image object.

Definition

The drawImage() method draws an image, canvas, or video onto the canvas.
The drawImage() method can also draw parts of an image, and/or increase/reduce the image size.

Syntax

Position the image on the canvas:

context.drawImage(img,x,y);

1	context.drawImage(img,x,y);

Position the image on the canvas, and specify width and height of the image:

context.drawImage(img,x,y,width,height);

1	context.drawImage(img,x,y,width,height);

Clip the image and position the clipped part on the canvas:

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

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

Parameter

img  >	Specifies the image, canvas, or video element to use.
sx   >	Optional. The x coordinate where to start clipping.
sy   >	Optional. The y coordinate where to start clipping.
swidth >  Optional. The width of the clipped image.
sheight >  Optional. The height of the clipped image.
x    >	The x coordinate where to place the image on the canvas.
y    >	The y coordinate where to place the image on the canvas.
width  >   Optional. The width of the image to use (stretch or reduce the image).
height  >  Optional. The height of the image to use (stretch or reduce the image).

img > Specifies the image, canvas, or video element to use.

sx > Optional. The x coordinate where to start clipping.

sy > Optional. The y coordinate where to start clipping.

swidth > Optional. The width of the clipped image.

sheight > Optional. The height of the clipped image.

x > The x coordinate where to place the image on the canvas.

y > The y coordinate where to place the image on the canvas.

width > Optional. The width of the image to use (stretch or reduce the image).

height > Optional. The height of the image to use (stretch or reduce the image).

Example

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="400"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var imageObj = new Image();

      imageObj.onload = function() {
        context.drawImage(imageObj, 69, 50);
      };
      imageObj.src = 'https://webtaxonomy.com/wp-content/uploads/2017/05/log-icon-wt.png';
    </script>
  </body>
</html>

<!DOCTYPE HTML>

<html>

<head>

<style>

body {

margin: 0px;

padding: 0px;

}

</style>

</head>

<body>

var canvas = document.getElementById('myCanvas');

var context = canvas.getContext('2d');

var imageObj = new Image();

imageObj.onload = function() {

context.drawImage(imageObj, 69, 50);

};

imageObj.src = 'https://webtaxonomy.com/wp-content/uploads/2017/05/log-icon-wt.png';

</script>

</body>

</html>