HTML5 Canvas - вырезание заполнены области с инсультом

Question

У меня есть маленький пример здесь: https://jsfiddle.net/pets87/abdyer7r/2/

function drawImagesToCanvas() { 
    var innerRadius = 15; 
    var outerRadius = 140; 
    var radius = outerRadius; 
    var gX = 100; 
    var gY = 100; 

    var gradient = context.createRadialGradient(gX, gY, innerRadius, gX, gY, outerRadius); 
    gradient.addColorStop(0, 'transparent'); 
    gradient.addColorStop(0.01, 'white'); 
    gradient.addColorStop(0.1, 'yellow'); 
    gradient.addColorStop(1, 'transparent'); 
    context.beginPath(); 
    context.arc(gX, gY, radius, 0, 2 * Math.PI); 

    context.fillStyle = gradient; 
    context.fill(); 
} 
drawImagesToCanvas(); 

function drawline(){ 
    context.beginPath(); 
    context.moveTo(180, 10); 
    context.lineWidth = 2; 
    context.lineTo(180, 200); 
    context.stroke(); 
} 
drawline(); 

У меня есть яркая лампочка, как показан на картинке. Тогда я хочу нарисовать удар. Инсульт подобен стене. Я хочу, чтобы удар вырезал свет, идущий от лампочки.

Есть ли способ сделать это?

Answer 1

Я не уверен в этом, но вы можете проверить, что я пытался сделать. Просто измените функцию DrawLine так:

context.beginPath(); 
context.moveTo(180, 5); 
context.fillStyle="black"; 
context.fillRect(180,5,200,200); 
context.clearRect(182,5,200,200); 

Изменено скрипку: https://jsfiddle.net/abdyer7r/3/