HTML - 캔버스 이미지 클리핑

원본 캔버스에서 모양과 크기의 영역을 자르는 메서드가 clip() 입니다. 영역이 잘리면 이후의 모든 그리기는 잘린 영역으로 제한됩니다. 따라서 자르기 전에 save()를 사용하여 설정을 저장한 다음 clip() 한 후 restore()로 이전 상태로 복원할 수 있습니다.

<style>canvas { border: 1px solid black; }</style>
<canvas id="mycanvas"/>

<script type="text/javascript">
var canvas = document.getElementById('mycanvas');
canvas.width = 300;
canvas.height = 300;
var context = canvas.getContext('2d');

context.beginPath();
context.arc(80,50,100,0, 2 * Math.PI);
context.stroke();
context.clip();

var img = new Image();
img.onload = function(){
  context.drawImage(img, 0,0,240,223);
}
img.src = "http://example.com/image/bobtail-1503869_960_720.png";
</script>

위 그림에서 첫 번째 이미지가 원본 이미지이고, 두 번째 이미지가 클리핑 지점을 빨간 원으로 가리킵니다. 세 번째가 클리핑한 이미지입니다.

<style>
canvas {
  width: 300px;
  height: 100px;
  border: 1px solid black;
 }
</style>
<canvas id="mycanvas"/>

<script type="text/javascript">
var canvas = document.getElementById('mycanvas');
canvas.width = 300;
canvas.height = 150;
var context = canvas.getContext('2d');

context.beginPath();
context.arc(100, 75, 50, 0, Math.PI * 2);
context.clip();

context.fillStyle = 'blue';
context.fillRect(0, 0, canvas.width, canvas.height);
context.fillStyle = 'orange';
context.fillRect(0, 0, 100, 100);
</script>