Increase or decrease units in HTML5 Canvas grid

DOM Javascript Web Development Front End Scripts

HTML5 canvas provides scale(x, y) method that is used to increase or decrease the units in our canvas grid. This can be used to draw scaled down or enlarged shapes and bitmaps.

This method takes two parameters where x is the scale factor in the horizontal direction and y is the scale factor in the vertical direction. Both parameters must be positive numbers.

Example

Let us see an example −

<!DOCTYPE HTML>
<html>
   <head>
      <script>
         function drawShape(){
            // get the canvas element using the DOM
            var canvas = document.getElementById('mycanvas');

            if (canvas.getContext){
               // use getContext to use the canvas for drawing
               var ctx = canvas.getContext('2d');
               ctx.strokeStyle = "#fc0";
               ctx.lineWidth = 1.5;
               ctx.fillRect(0,0,300,300);

               // Uniform scaling
               ctx.save()
               ctx.translate(50,50);
               drawSpirograph(ctx,22,6,5);
 
               ctx.translate(100,0);
               ctx.scale(0.75,0.75);
               drawSpirograph(ctx,22,6,5);

               ctx.translate(133.333,0);
               ctx.scale(0.75,0.75);
               drawSpirograph(ctx,22,6,5);

               ctx.restore();
               ctx.strokeStyle = "#0cf";
               ctx.save()
               ctx.translate(50,150);
               ctx.scale(1,0.75);
               drawSpirograph(ctx,22,6,5);

               ctx.translate(100,0);
               ctx.scale(1,0.75);
               drawSpirograph(ctx,22,6,5);

               ctx.translate(100,0);
               ctx.scale(1,0.75);
               drawSpirograph(ctx,22,6,5);

               ctx.restore();
               ctx.strokeStyle = "#cf0";
               ctx.save()
               ctx.translate(50,250);
               ctx.scale(0.75,1);
               drawSpirograph(ctx,22,6,5);

               ctx.translate(133.333,0);
               ctx.scale(0.75,1);
               drawSpirograph(ctx,22,6,5);

               ctx.translate(177.777,0);
               ctx.scale(0.75,1);
               drawSpirograph(ctx,22,6,5);
               ctx.restore();
            } else {
               alert('You need Safari or Firefox 1.5+ to see this demo.');
            }
         }
         function drawSpirograph(ctx,R,r,O){
            var x1 = R-O;
            var y1 = 0;
            var i = 1;
            ctx.beginPath();
            ctx.moveTo(x1,y1);
            do {
               if (i>20000) break;
               var x2 = (R+r)*Math.cos(i*Math.PI/72) - (r+O)*Math.cos(((R+r)/r)*(i*Math.PI/72))
               var y2 = (R+r)*Math.sin(i*Math.PI/72) - (r+O)*Math.sin(((R+r)/r)*(i*Math.PI/72))
               ctx.lineTo(x2,y2);
               x1 = x2;
               y1 = y2;
               i++;
            }
            while (x2 != R-O && y2 != 0 );
            ctx.stroke();
         }
      </script>
   </head>

   <body onload = "drawShape();">
      <canvas id = "mycanvas" width = "400" height = "400"></canvas>
   </body>
</html>