Tutorials
Basics
Advanced
KineticJS
Three.js
HTML5 Canvas
Canvas Element
Lines
Line
Line Width
Line Color
Line Cap
Curves
Arc
Quadratic Curve
Bezier Curve
Paths
Path
Line Join
Rounded Corners
Shapes
Custom Shape
Rectangle
Circle
Semicircle
Fill Styles
Color Fill
Linear Gradient
Radial Gradient
Pattern
Images
Draw Image
Image Size
Image Crop
Image Loader
Text
Font, Size & Style
Text Color
Text Stroke
Text Align
Text Baseline
Text Metrics
Text Wrap

HTML5 Canvas Image Crop Tutorial

To crop an image using HTML5 Canvas, we can add six additional arguments to the drawImage() method, sourceX, sourceY, sourceWidth, sourceHeight, destWidth and destHeight. These arguments define the location and size of a rectangle that we want to cut out of an image.

Reference: www.whatwg.org