HTML Canvas translate() translate canvas context several times

Description

HTML Canvas translate() translate canvas context several times

View in separate window 

<!DOCTYPE HTML>
<html>
<head>
<script>
  // translate position

  window.onload = function() {//from ww  w.  j a v  a 2 s .c o  m

    canvas = document.getElementById("canvasArea");
    context = canvas.getContext("2d");

    // SIZE of square.
    let size = 35;

    // DISPLAY squares.
    drawSquare(0, 0, "gray");
    drawSquare(size, size, "red");
    drawSquare(size, size, "orange");
    drawSquare(size, -size, "blue");
    drawSquare(size, 0, "pink");
    drawSquare(size, -size, "purple");
    drawSquare(2 * size, size, "green");

    // DRAW SQUARE function.
    function drawSquare(translateH, translateV, color) {
      // COLOR.
      context.fillStyle = color;

      // TRANSLATE canvas.
      context.translate(translateH, translateV);

      // SQUARE display.
      context.fillRect(0, 0, size, size);
    }
  }
</script>
</head>
<body>
  <div style="width: 300px; height: 125px; margin: 0 auto; padding: 5px;">
    <canvas id="canvasArea" width="300" height="125"
      style="border: 2px solid black">
Your browser doesn't currently support HTML5 Canvas.
</canvas>
  </div>
</body>
</html>



PreviousNext

Related