HTML canvas setTransform() Method
The setTransform() method is used to replace the current transformation matrix i.e. each object on the canvas has a current transformation matrix. The setTransform() method is used to reset the current transform to the identity matrix and then runs transform() with the same parameters.
a c e b d f 0 0 1
It simply allows to scale, move, skew and rotate the current context.
Syntax:
context.setTransform(a, b, c, d, e, f);
Parameter Values:
- a denotes Horizontal scaling
- b denotes Horizontal skewing
- c denotes Vertical skewing
- d denotes Vertical scaling
- e denotes Horizontal moving
- f denotes Vertical moving
Example:
<!DOCTYPE html> < html > < body > < h3 style = "color:green" > w3wiki</ h3 > < h3 style = "color:green" > HTML canvas setTransform() method </ h3 > < canvas id = "gfgCanvas" width = "400" height = "300" style = "border:2px solid ;" > </ canvas > < script > var gfg = document.getElementById("gfgCanvas"); var context = gfg.getContext("2d"); context.fillStyle = "green"; context.fillRect(80, 80, 200, 100) context.setTransform(1, 0, 2, 2, 10, 10); context.fillStyle = "black"; context.fillRect(20, 20, 20, 80); </ script > </ body > </ html > |
Output:
Supported Browsers:
- Chrome
- Mozilla Firefox
- Internet Explorer 9.0
- Opera
- Safari