HTML Canvas Square Scale

Description

HTML Canvas Square Scale

View in separate window 

<!DOCTYPE HTML>
<html>
<head>
<script>
  // scaling objects
  window.onload = function() {//from w  w w  . jav  a  2 s.co 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>



PreviousNext

Related