Scaling is the next method for transforming canvas, We have already discuss how to rotate canvas and about to translate method in our previous article Rotate object or shape in HTML5 Canvas.
In canvas, scaling is a transformation that enlarges or shrinks objects by a scale unit values in x and y direction and can be achieved by scale(x,y). The value 1 of x and y units indicates the normal size of object where values are larger than 1 enlarge(increase) the size of object and similarly values smaller than 1 reduces the size of object. The X unit value scale the object horizontally and y value scales the object vertically.
Syntax of scale method:
context.scale(x,y)
where context is the object of the 2d context of the canvas.
X: indicates horizontal scaling factor
Y: indicates vertical scaling factor
See the following image:
When you draw something on canvas one unit is exactly one pixel by default. But scale(x,y) method can change this, suppose if you scale canvas by 0.5 scaling unit than the resulting unit would become 0.5 pixels and so shapes would be drawn at half size. Similarly the 2 scaling unit will draw double size of the shape and 3 scaling unit will draw three times larger shape in compare of normal shape.
Example
In the below example we will draw a rectangle and than we will scale the rectangle to the double size:
<!DOCTYPE HTML> <html> <head> <style> #myCanvas { border: 1px solid #bbb; } </style> </head> <body> <canvas id="myCanvas" width="578" height="200"></canvas> <script> var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); var rectWidth = 150; var rectHeight = 30; // scale context function scaleRectangle() { context.translate(canvas.width / 2, canvas.height / 2); context.fillStyle = 'red'; context.strokeRect(rectWidth / -2, rectHeight / -2, rectWidth, rectHeight); context.scale(2, 2); context.strokeRect(rectWidth / -2, rectHeight / -2, rectWidth, rectHeight); } scaleRectangle(); </script> </body> </html>
The following example demonstrates how to flip text vertically. You can use ctx.scale(-1, 1) to flip the context horizontally and ctx.scale(1, -1) to flip it vertically.
<!DOCTYPE HTML> <html> <head> <style> #myCanvas { border: 1px solid #bbb; } </style> </head> <body> <canvas id="myCanvas" width="578" height="200"></canvas> <script> var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); // scale context function scaleText() { context.font = "30px Arial"; context.fillText("Hello World", 10, 50); context.scale(1, -1); context.fillText("Hello World", 10, -80); } scaleText(); </script> </body> </html>
The output will be:
