Canvas Transform
You are Here:
How to Transform
ctx.transform() canvas method multiplies the current transformation with the matrix described by the arguments of this method. This lets you scale, rotate, translate (move), and skew the context.
This example skews a rectangle both vertically (.1) and horizontally (.4). Scaling and translation remain unchanged.
Help Tips: Learn how to draw a canvas rectange.
Example
HTML Online Editor
<!DOCTYPE html>
<html lang="en-US">
<body>
<canvas id="point" width="150" height="120">
Your browser does not support the canvas element.
</canvas>
<script>
var canvas = document.getElementById('point');
var ctx = canvas.getContext('2d');
ctx.transform(1, .1, .4, 1, 0, 0);
ctx.fillStyle = "#339933";
ctx.fillRect(0, 0, 100, 100);
</script>
</body>
</html>
Syntax
ctx.transform(a, b, c, d, e, f)
Attributes Value
| Value | Explanation |
|---|---|
| a | Specifies horizontal scaling. Default value is 1. |
| b | Specifies vertical skewing. |
| c | Specifies horizontal skewing. |
| d | Specifies vertical scaling. Default value is 1. |
| e | Specifies horizontal translation. |
| f | Specifies vertical translation. |
Reminder
Hi Developers, we almost covered 93% of Canvas Tutorials with examples for quick and easy learning.
We are working to cover every Single Concept in Canvas.
Please do google search for:
Join Our Channel
Join our telegram channel to get an instant update on depreciation and new features on HTML, CSS, JavaScript, jQuery, Node.js, PHP and Python.
This channel is primarily useful for Full Stack Web Developer.
