HTML5 Game - Canvas Scaling Objects

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

Description

Scaling Objects

Demo

ResultView the demo in separate window 

<!DOCTYPE HTML>
<html>
<head>
<script>
//Draws rectangles on a canvas.
window.onload = function()/* w ww  . j  a v  a2 s  . c  o m*/
{
   canvas  = document.getElementById("canvasArea");
   context = canvas.getContext("2d");

   //DISPLAY squares.
   //         xPos  yPos  scaleH scaleV color     save
   //         ----  ----  ------ ------ --------  -----
   drawSquare( 25,   25,  1.4,   1.4,   "purple", true );
   drawSquare( 25,   25,  1.0,   1.1,   "red",    true );
   drawSquare( 25,   25,  0.7,   0.7,   "orange", true );
   drawSquare(100,   25,  1.4,   1.4,   "purple", false);
   drawSquare(100,   25,  1.0,   1.1,   "red",    false);
   drawSquare(100,   25,  0.7,   0.7,   "orange", false);

   //DRAW SQUARE function.
   function drawSquare(xPos,   yPos,
                       scaleH, scaleV, color, save)
   {
      //SAVE context.
      if (save) {context.save();}

      //ATTRIBUTES & VARIABLES.
      context.fillStyle = color;
      let size          = 35;

      //TRANSLATE position.
      context.translate(xPos, yPos);

      //SCALE canvas.
      context.scale(scaleH, scaleV);

      //SQUARE display.
      context.fillRect(0, 0, size, size);

      //RESTORE context.
      if (save) {context.restore();}
   }
}
</script>
</head>
<body>

<div    style = "width:450px;   height:160px;
                 margin:0 auto; padding:5px;">
<canvas id    = "canvasArea"
        width = "450"  height = "160"
        style = "border:2px solid black">
Your browser doesn't currently support HTML5 Canvas.
</canvas>
</div>
</body>
</html>

Related Topic