からあげを増量できるcanvasタグ

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4 <meta charset="utf-8">
  5 <title>からあげ増量</title>
  6 </head>
  7 <body>
  8 <canvas id="canvas1" width="1000" height="1000"></canvas>
  9 <script type "text/javascript">
 10  var canvas = document.getElementById("canvas1");
 11  var cx = canvas.getContext("2d");
 12  var image = new Image();
 13  image.onload = function() {
 14    var pattern = cx.createPattern(image, "repeat");
 15    cx.fillStyle = pattern;
 16    cx.fillRect(0, 0, 1000, 1000);
 17  };
 18  image.src = 'karaage.jpg' ;
 19 </script>
 20 </body>
 21 </html>

14行目のcx.createPattern(image, "repeat");を用いることにより
canvasで指定したサイズ分画像を繰り返すことができる
（