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

new window

Code Editor

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

     id="myCanvas" width="578" height="200">