HTML Canvas createPattern() create pattern from canvas

Description

HTML Canvas createPattern() create pattern from canvas

View in separate window 


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

  window.onload = function() {/* ww  w  .  j a  v a  2  s  .c o  m*/
    // CANVAS contexts.
    canvasObjects = document.getElementById("canvasObjects");
    contextObjects = canvasObjects.getContext("2d");
    canvasTexture = document.getElementById("canvasTexture");
    contextTexture = canvasTexture.getContext("2d");

    contextTexture.fillStyle = "grey";
    contextTexture.fillRect(0, 0, 1, 1);
    contextTexture.fillStyle = "grey";
    contextTexture.fillRect(0, 1, 1, 1);
    contextTexture.fillStyle = "lightgrey";
    contextTexture.fillRect(0, 2, 1, 1);
    contextTexture.fillStyle = "lightgrey";
    contextTexture.fillRect(1, 0, 1, 1);
    contextTexture.fillStyle = "grey";
    contextTexture.fillRect(1, 1, 1, 1);
    contextTexture.fillStyle = "grey";
    contextTexture.fillRect(1, 2, 1, 1);
    contextTexture.fillStyle = "darkgrey";
    contextTexture.fillRect(2, 0, 1, 1);
    contextTexture.fillStyle = "darkgrey";
    contextTexture.fillRect(2, 1, 1, 1);
    contextTexture.fillStyle = "grey";
    contextTexture.fillRect(2, 2, 1, 1);

    // REPEAT pattern variables. 
    let pattern = contextObjects.createPattern(canvasTexture, "repeat");

    // PATTERN objects.
    contextObjects.fillStyle = pattern;
    contextObjects.fillRect(0, 0, canvasObjects.width, canvasObjects.height);
  }
</script>
</head>
<body>
  <div>
    <!-- CANVAS DEFINITIONS  -->
    <canvas id="canvasObjects" width="400" height="100"
      style="border: 2px solid black; position: absolute; left: auto; top: auto; z-index: 2">
Your browser doesn't currently support HTML5 Canvas.
</canvas>
    <canvas id="canvasTexture" width="3" height="3"
      style="position: absolute; left: auto; top: auto; z-index: 1">
Your browser doesn't currently support HTML5 Canvas.
</canvas>
  </div>
</body>
</html>



PreviousNext

Related