Copyright © tutorialspoint.com

HTML5 Canvas - Using Images

previous next


Advertisements

This tutorial would show how to import and external image into a canvas and then how to draw on that image by using following methods:

SNMethod and Description
1beginPath()
This method resets the current path.
2moveTo(x, y)
This method creates a new subpath with the given point.
3closePath()
This method marks the current subpath as closed, and starts a new subpath with a point the same as the start and end of the newly closed subpath.
4fill()
This method fills the subpaths with the current fill style.
5stroke()
This method strokes the subpaths with the current stroke style.
6drawImage(image, dx, dy)
This method draws the given image onto the canvas. Here image is a reference to an image or canvas object. x and y form the coordinate on the target canvas where our image should be placed.

Example:

Following is a simple example which makes use of above mentioned methods to import an draw on an image.

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function drawShape(){
  // get the canvas element using the DOM
  var canvas = document.getElementById('mycanvas');

  // Make sure we don't execute when canvas isn't supported
  if (canvas.getContext){

    // use getContext to use the canvas for drawing
    var ctx = canvas.getContext('2d');

    // Draw shapes
    var img = new Image();
    img.src = '/images/backdrop.jpg';

    img.onload = function(){
       ctx.drawImage(img,0,0);
       ctx.beginPath();
       ctx.moveTo(30,96);
       ctx.lineTo(70,66);
       ctx.lineTo(103,76);
       ctx.lineTo(170,15);
       ctx.stroke();
   }

  } else {
    alert('You need Safari or Firefox 1.5+ to see this demo.');
  }
}
</script>
</head>
<body onload="drawShape();">
   <canvas id="mycanvas"></canvas>
</body>
</html>

Assuming we have following image to import images/backdrop.jpg.

Backdrop

The above example would draw following shape:

Canvas Using Images

To learn above concept - Do Online Practice using latest version of either Safari or Opera.


previous next

Copyright © tutorialspoint.com