dom/canvas/test/reftest/1719886-1-ref.html

   1 <!DOCTYPE html>
   2 <html>
   3 <body>
   4 Pattern Canvas<br>
   5 <canvas id="patternCanvas" style="border: 1px solid black" width="10" height="10"></canvas><br>
   6 Main Canvas (red square should be in top-left corner)<br>
   7 <canvas id="canvas" style="border: 1px solid black" width="100" height="100"></canvas>
   8 <script>
   9
  10 // Draw a 10x10 red rectangle that will be used for the pattern.
  11 const patternCanvas = document.getElementById("patternCanvas");
  12 const patternCtx = patternCanvas.getContext("2d");
  13 patternCtx.fillStyle = "red";
  14 patternCtx.fillRect(0, 0, patternCanvas.width, patternCanvas.height);
  15
  16 const canvas = document.getElementById("canvas");
  17 const ctx = canvas.getContext("2d");
  18
  19 const pattern = ctx.createPattern(patternCanvas, "no-repeat");
  20
  21 ctx.fillStyle = pattern;
  22 // Fill the entire canvas with the pattern.
  23 ctx.fillRect(0, 0, 100, 100);
  24
  25 </script>
  26
  27 </body>
  28 </html>