CODEWITHSUNDEEP
javascripthtmlcanvas
alexyre
alexyre

Reputation: 21

avoid gap between triangles in html5 canvas

I am trying to adapt a 2d visibility algorithm with radial gradient but i can't manage to fill the gaps, see this fiddle https://jsfiddle.net/j9gu16L4/7/

//before that i draw images to simulate fog
const gradient = context.createRadialGradient(200, 100, 40, 200, 100, 100);
gradient.addColorStop(0, "rgba(0, 0, 0, 1)");
gradient.addColorStop(0.6, "rgba(0, 0, 0, 0.5)");
gradient.addColorStop(1, "rgba(0, 0, 0, 0)");
context.globalCompositeOperation = "destination-out";
context.beginPath();
context.moveTo(200, 100);
context.lineTo(280, 150);
context.lineTo(170, 240);
context.fillStyle = gradient;
context.fill();
context.beginPath();
context.moveTo(200, 100);
context.lineTo(170, 240);
context.lineTo(90, 120);
context.fill();

I tried using stroke but it leave a dark line between the triangles

Any tips ?

Upvotes: 2

Views: 92

Answers (1)

Trentium
Trentium

Reputation: 3719

Rather than draw 2 shapes and fill, just draw 1 and fill...

context.beginPath();
context.moveTo(170, 240);
context.lineTo(90, 120);
context.lineTo(200,100);
context.lineTo(280, 150);
context.closePath();
context.fillStyle = gradient;
context.fill();

Upvotes: 1

Related Questions