HTML5 Game - Canvas Scaling Example

  1. HOME
  2. HTML5 Game
  3. Canvas
  4. Scale

Introduction

The scale transformation scales the 2d rendering context in size.

The (x, y) arguments are multipliers rather than pixel values.

Demo

ResultView the demo in separate window 

<html>
    <head>
        <script>
            window.onload = function(){
                let canvas = document.getElementById("myCanvas");
                let context = canvas.getContext("2d");
               //w ww .j  av a 2 s . co  m
                context.fillStyle = "red";   
                context.fillRect(50, 50, 100, 100);  

           context.scale(2, 2);  
           context.fillRect(150, 150, 100, 100);  

  
                context.fillStyle = "blue";  
                context.fillRect(50, 50, 100, 100);  

            };
        </script>
    </head>
    <body>
        <canvas id="myCanvas" width="600" height="250" style="border:1px solid black;">
        </canvas>
    </body>
</html>

Note

This example is set to scale the 2d rendering context by a multiple of two in both the x and y directions.

Related Topic