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.
Define the canvas context:
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; // destination image size and position var destWidth = sourceWidth; var destHeight = sourceHeight; var destX = canvas.width / 2 - destWidth / 2; var destY = canvas.height / 2 - destHeight / 2; context.drawImage(this, sourceX, sourceY, sourceWidth...