이미지가 작동하지 않는 html5 캔버스 구멍

Question

캔버스에 구멍을 만들려고합니다. 이미지를 캔버스에 로딩하면됩니다.

이 캔버스에 상단 레이어에 구멍이 있어야합니다.

난 그냥 시계 반대 방향으로 캔버스 규칙에 대해 읽은 후 나는 한 - 그것을

에서 이미지 전에 캔버스를

var c = document.getElementById("canvas-front"); var ctx = c.getContext("2d"); var centerX = c.width/2; var centerY = c.offsetTop; var radius = 30; ctx.beginPath(); ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI,true);//boolean true to counter-clockwise ctx.fillStyle = 'black'; ctx.fill(); 

below-으로 시계 반대 위치에 구멍을 만들어 이 캔버스에 이미지 적용 -

Canvas-

    <canvas id="canvas-front" width="261" height="506"></canvas> 

둘 다 이미지에서 볼 수 있듯이

, 나는 캔버스 작업에서이 구멍을 얻을 수 없습니다.

이미지가이 부분과 겹치지 않도록이 호를 어떻게 만듭니 까?

Answer 1

내가 얻을이 문제 solved-

이미지가 아크가되고있는 을로드하는 동안 나는 그

나는 캔버스와 redrew 이미지에 빈했던 파일의 변화에 ​​

및 뭐하고했다 무엇 이미지가 다시 캔버스를 도면 반 시계 방향 위치 -

을 생성는

var canvas = document.getElementById("canvas-front"); 
         canvas.width = canvas.width;//blanks the canvas 
         var c = canvas.getContext("2d"); 

을 변경 -

이미지 만들기 먼저

img.onload = function() { 
    c.drawImage(img, 0, 0); 
    var centerX = canvas.width/2; 
    var centerY = canvas.offsetTop; 
    var radius = 30; 
    c.beginPath(); 
    c.arc(centerX, centerY, radius, 0, 2 * Math.PI, true); 
    c.fillStyle = 'black'; 
    c.fill(); 
    }