HTML Canvas createPattern() compare repeat values

Description

HTML Canvas createPattern() compare repeat values

View in separate window 


<!DOCTYPE HTML>
<html>
<head>
<script>
  // SUMMARY: Draws patterns on a canvas.

  window.onload = function() {// ww w .ja va  2  s  .  c o  m

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

    // IMAGE variables and sources.
    let smallImage = new Image();
    smallImage.src = "image1.png";

    // PATTERN creation.
    smallImage.onload = function() {
      // ATTRIBUTES.
      context.shadowOffsetX = 4;
      context.shadowOffsetY = 4;
      context.shadowBlur = 20;
      context.shadowColor = "lavender";
      context.strokeStyle = "gray";
      context.lineWidth = 1;

      // REPEAT pattern variables. 
      let repeatPattern = context.createPattern(smallImage, "repeat");
      let noRepeatPattern = context.createPattern(smallImage, "no-repeat");
      let repeatXPattern = context.createPattern(smallImage, "repeat-x");
      let repeatYPattern = context.createPattern(smallImage, "repeat-y");

      // PATTERN objects.
      context.fillStyle = repeatPattern;
      context.fillRect(125, 125, 325, 325);
      context.strokeRect(125, 125, 325, 325);
      context.fillStyle = noRepeatPattern;
      context.fillRect(0, 0, 100, 100);
      context.strokeRect(0, 0, 100, 100);
      context.fillStyle = repeatXPattern;
      context.fillRect(125, 0, 350, 100);
      context.strokeRect(125, 0, 350, 100);
      context.fillStyle = repeatYPattern;
      context.fillRect(0, 125, 100, 350);
      context.strokeRect(0, 125, 100, 350);
    }
  }
</script>
</head>
<body>
  <div style="width: 500px; height: 500px; margin: 0 auto; padding: 5px;">
    <canvas id="canvasArea" width="500" height="500"
      style="border: 2px solid black">
You're browser doesn't currently support HTML5 Canvas.
</canvas>
  </div>
</body>
</html>



PreviousNext

Related