HTML Canvas Rectangle transform

Description

HTML Canvas Rectangle transform

View in separate window 

<!DOCTYPE HTML>
<html>
<head>
<script>
  window.onload = function() {/*from   ww w. j ava 2  s .  c  om*/

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

    // BACKGROUND.
    context.fillStyle = "silver";
    context.fillRect(0, 0, canvas.width, canvas.height);

    // DRAW rectangles. Note abbreviations:
    //       sc:scale  sk:skew  tr:translate
    //       X:horizontal axis    Y:vertical axis
    //
    //       scX  scY  skX  skY  trX  trY  color
    //       ---  ---  ---  ---  ---  ---  --------
    drawRect(1.0, 1.0, 0.0, 0.0, 25, 25, "red");
    drawRect(1.0, 1.0, 0.2, 0.0, 125, 25, "green");
    drawRect(1.0, 1.0, 0.0, 0.2, 225, 25, "blue");
    drawRect(1.0, 1.0, 0.2, 0.2, 325, 25, "purple");
    drawRect(1.2, 1.0, 0.0, 0.0, 125, 110, "yellow");
    drawRect(1.0, 1.2, 0.0, 0.0, 15, 110, "aqua");
    drawRect(1.2, 1.2, 0.2, 0.2, 225, 110, "black");
    drawRect(1.3, 1.3, -.2, -.2, 325, 110, "pink");
  }
  // DRAW rectangle function.
  function drawRect(scaleX, scaleY, skewX, skewY, translateX, translateY,
      color) {
    // ATTRIBUTES & VARIABLES.
    let width = 60;
    let height = 40;
    context.shadowOffsetX = 4;
    context.shadowOffsetY = 4;
    context.shadowBlur = 5;
    context.shadowColor = "gray";
    context.fillStyle = color;

    context.setTransform(scaleX, skewY, skewX, scaleY, translateX,
        translateY);

    // DISPLAY rectangle.
    context.fillRect(0, 0, width, height);
  }
</script>
</head>
<body>
  <div style="width: 425px; height: 200px; margin: 0 auto; padding: 5px;">
    <canvas id="canvasArea" width="425" height="200"
      style="border: 2px solid black">
You're browser doesn't currently support HTML5 Canvas.
</canvas>
  </div>
</body>
</html>



PreviousNext

Related