클립 오버레이 상단의 이미지 원

Question

내가 추가 한 불투명도 rect없이 이미지를 볼 때 마우스를 움직일 수 있기를 원합니다.

var canvas = document.querySelector('canvas'); 
var context = canvas.getContext('2d'); 
var mouse = { x: 0, y: 0 }; 
var image = new Image(); 
image.src = 'http://lorempixel.com/800/600/cats/6'; 

document.addEventListener('mousemove', function(e) { 
    mouse.x = e.pageX; 
    mouse.y = e.pageY; 
    draw(context); 

}, false); 

window.addEventListener('resize', function resize() { 
    canvas.width = window.innerWidth; 
    canvas.height = window.innerHeight; 
    return resize; 
}(), false); 


function draw(context) { 
    context.clearRect(0, 0, canvas.width, canvas.height); 
    context.drawImage(image, 0, 0, canvas.width, canvas.height); 

    // Draw the green hulk to clear 
    context.beginPath(); 
    context.fillStyle = 'rgba(0, 255, 0, 0.5)'; 
    context.fillRect(0, 0, canvas.width, canvas.height); 

    clearArc(context, mouse.x, mouse.y, 50); 
} 

// http://stackoverflow.com/a/12895687/1250044 
function clearArc(context, x, y, radius) { 
    context.save(); 
    context.globalCompositeOperation = 'destination-out'; 
    context.beginPath(); 
    context.arc(x, y, radius, 0, 2 * Math.PI, false); 
    context.fill(); 
    context.restore(); 
} 

나는 jsfiddle을 포함 시켰습니다. 나는 꽤 사소한 것을 놓치고 있다고 확신한다.

Answer 1

질문을 올바르게 이해하면 마우스 주변의 원을 제거하고 싶습니다. 함수 clear arc는 마우스 주위에 원을 그리는 중입니다. 이 함수를 제거하고 draw 함수에서 clearArc(context, mouse.x, mouse.y, 50);을 제거해야합니다.