HTML5 Canvas Cookbook

Cropping an image

In this recipe, we'll crop out a section of an image and then draw the result onto the canvas.

Follow these steps to crop out a section of an image and draw the result onto the canvas.

How to do it...

1. Define the canvas context:

   window.onload = function(){
       var canvas = document.getElementById("myCanvas");
       var context = canvas.getContext("2d");

2. Create an image object, set the onload property to a function that crops the image, and then set the source of the image:

    var imageObj = new Image(); imageObj.onload = function(){ // source rectangular area var sourceX = 550; var sourceY = 300; var sourceWidth = 300; var sourceHeight = 214; // ...