からあげをちら見できるcanvasタグ

HTML5 
  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4 <meta charset="utf-8">
  5 <title>Sample/canvas</title>
  6 </head>
  7 <body>
  8 <canvas id="canvas1" width="200" height="200"></canvas>
  9 <script type "text/javascript">
 10  var canvas = document.getElementById("canvas1");
 11  var cx = canvas.getContext("2d");
 12  cx.beginPath();
 13  cx.arc(100, 100, 50, 0, 2 * Math.PI, true);
 14  cx.clip();
 15  var image = new Image();
 16  image.onload = function() {
 17    cx.drawImage(image,50,50, canvas.width, canvas.height);
 18  };
 19  image.src = 'karaage.jpg' ;
 20 </script>
 21 </body>
 22 </html>


13行目cx.arc(100, 100, 50, 0, 2 * Math.PI, true);
で円のかたちをきめる