HTML5 Canvas Reference - drawImage()

We can use drawImage() method to draw an image, canvas, or video onto the canvas.

Browser compatibility


`drawImage()`	Yes	Yes	Yes	Yes	Yes

JavaScript Syntax

There are three versions of the drawImage method.

To simply draw the image on the canvas:

context.drawImage(img,x,y);

To draw the image on the canvas, and resize the image:

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

To draw the clipped image part on the canvas:

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

The following image shows the relation between the image and clipped image and canvas.

null

Image reference: http://www.w3.org/TR/2dcontext/

Parameter Values

Parameter	Description
img	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
height	Optional. The height of the image to use

Normal Paint

drawImage(Image, dx, dy)

This function takes in three parameters: an Image object, and x and y values representing the top-left corner location to start painting the image on the canvas.

To draw our spaceship image at the 0,0 location (the top-left corner) of the canvas:

context.drawImage(spaceShip, 0, 0);

To draw another copy at 50,50, we would simply make the same call but change the location:

context.drawImage(spaceShip, 50, 50);

Resize

To paint and scale drawn images, we can also pass parameters into the drawImage() function.

The second version of drawImage() takes in an extra two parameters:

drawImage(Image, dx, dy, dw, dh)

dw and dh represent the width and height source image will be painted.

If we want to scale the image, we would use the following code:

context.drawImage(spaceShip, 0, 0,64,64);

Draw Image Part

The third version drawImage() allows us to draw an arbitrary rectangle of data from image.

The structure of the parameters for this third version of the drawImage() function looks like this:

drawImage(Image, sx, sy, sw, sh, dx, dy, dw, dh)

sx and sy represent the "source positions" to start copying the source image. sw and sh represent the width and height of the rectangle starting at sx and sy.

That rectangle will be copied at "destination" positions dx and dy.

dw and dh represent the newly scaled width and height for the image.

Example

The following code shows how to load an image dynamically and then draw it onto canvas.


<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="150"></canvas>
<script>
<!--from ww  w. ja va 2 s  . c o  m-->
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    var img = new Image();
    img.onload = function() {
      ctx.drawImage(this, 0, 0);
    }
    img.src = "http://www.java2s.com/style/demo/border.png";


</script>
</body>
</html>

The code above is rendered as follows:

Example 2

The following code shows how to position the image on the canvas, and specify width and height of the image:


<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="150"></canvas>
<script>
<!--from ww  w  .j  av a 2s .  co  m-->
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    var img = new Image();
    img.onload = function() {
      ctx.drawImage(this, 0, 0, 150, 180);
    }
    img.src = "http://www.java2s.com/style/demo/border.png";


</script>
</body>
</html>

The code above is rendered as follows:

Example 3

The following code shows how to clip the image and draw the clipped part on the canvas:


<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="150"></canvas>
<script>
<!-- w ww.j av a2 s. co m-->
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    var img = new Image();
    img.onload = function() {
      ctx.drawImage(this, 20, 20, 150, 180,10, 10, 50, 60);
    }
    img.src = "http://www.java2s.com/style/demo/border.png";


</script>
</body>
</html>

The code above is rendered as follows:

Example 4

The following code shows how to center an image.


<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" style='background-color:#EEE;' width='500px' height='200px'/>
<script type='text/javascript'>
   var canvas = document.getElementById("canvas");
   var context = canvas.getContext("2d");
   <!--from  w  w  w .j a  v  a 2  s . c o m-->
   var imageObj = new Image();
   imageObj.onload = function(){
       var destX = canvas.width / 2 - this.width / 2;
       var destY = canvas.height / 2 - this.height / 2;
       
       context.drawImage(this, destX, destY);
   };
   imageObj.src = "http://www.java2s.com/style/demo/border.png";

</script>
</body>
</html>

The code above is rendered as follows:

Example 5

The following code shows how to rotate image by 45 degrees counter clockwise.


<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" style='background-color:#EEE;' width='500px' height='200px'/>
<script type='text/javascript'>
   var canvas = document.getElementById("canvas");
   var context = canvas.getContext("2d");
   <!-- w w w  .  j a v a2s . c o  m-->
   var imageObj = new Image();
   imageObj.onload = function(){
       // translate context to center of canvas
       context.translate(canvas.width / 2, canvas.height / 2);
       
       // rotate context by 45 degrees counter clockwise
       context.rotate(-1 * Math.PI / 4);
       context.drawImage(this, -1 * imageObj.width / 2, -1 * imageObj.height / 2);
   };
   
   imageObj.src = "http://www.java2s.com/style/demo/border.png";

</script>
</body>
</html>

The code above is rendered as follows: