สร้าง pattern ด้วย HTML5 Canvas

ใช้เมธอดต่อไปนี้เพื่อสร้าง pattern ด้วย HTML5 Canvas: createPattern(image, repetition) — เมธอดนี้ใช้ภาพเพื่อสร้าง pattern อาร์กิวเมนต์ที่สองเป็นสตริงที่มีค่าใดค่าหนึ่งจาก: repeat, repeat-x, repeat-y, และ no-repeat หากระบุ empty string หรือ null จะถือว่าเป็น repeat

ตัวอย่าง

ลองรันโค้ดด้านล่างเพื่อเรียนรู้การสร้าง pattern:

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      #test {
        width: 100px;
        height: 100px;
        margin: 0px auto;
      }
    </style>
    <script>
      function drawShape() {
        // get the canvas element using the DOM
        var canvas = document.getElementById('mycanvas');
        // Make sure we don't execute when canvas isn't supported
        if (canvas.getContext) {
          // use getContext to use the canvas for drawing
          var ctx = canvas.getContext('2d');
          // create new image object to use as pattern
          var img = new Image();
          img.src = 'images/pattern.jpg';
          img.onload = function() {
            // create pattern
            var ptrn = ctx.createPattern(img, 'repeat');
            ctx.fillStyle = ptrn;
            ctx.fillRect(0, 0, 150, 150);
          }
        } else {
          alert('You need Safari or Firefox 1.5+ to see this demo.');
        }
      }
    </script>
  </head>
  <body id="test" onload="drawShape();">
    <canvas id="mycanvas"></canvas>
  </body>
</html>