CODEWITHSUNDEEP
javascripthtml
Muno
Muno

Reputation: 769

HTML5 Canvas - Cut filled area with stroke

I have little example here: 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();

I have a bright lightbulb as shown on picture. Then i want to draw a stroke. The stroke is like a wall. I want that the stroke will cut out the light coming from lightbulb.

Is there a way to do that?

enter image description here

Upvotes: 1

Views: 217

Answers (1)

Sumanta736
Sumanta736

Reputation: 705

I am not sure about it, but you can check what i have tried do. Just change your drawline function like this:

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

Updated fiddle: https://jsfiddle.net/abdyer7r/3/

Upvotes: 1

Related Questions