CODEWITHSUNDEEP
javascriptcanvas
mav
mav

Reputation: 25

How to remove overlapping stroke

I'm trying to draw an array of circles that are supposed to break an array of lines. Everything looks good if circles are far away from each other, but if the circles overlap - a stroke appears underneath.

Any tips on how to remove this stroke when circles overlap? Here's what I'm talking about:

enter image description here

Here is my code:

let canvas = document.getElementById('myCanvas')
let ctx = canvas.getContext('2d');

document.body.style.backgroundColor = "#121212";
ctx.lineWidth = 1;
ctx.fillStyle = '#121212';
ctx.strokeStyle = '#9f9999';
ctx.lineCap = "round";

let width = canvas.width;
let height = canvas.height;

let lines = new Array(height);
let singleLine = new Array(width);
let step = 30;

for (let y = step; y < height; y += step) {
  ctx.beginPath();
  for (let x = step; x < width; x += step) {

    if (Math.random() < 0.85) {
      ctx.lineTo(x, y);
    } else {
      drawCircle(y, x);
    }
  }
  ctx.stroke();
  ctx.fill();
}


function drawCircle(x, y) {
  ctx.arc(y, x, 20, Math.PI, 0, false);
}
<canvas id="myCanvas"></canvas>

Upvotes: 1

Views: 284

Answers (1)

ggorlen
ggorlen

Reputation: 56905

This happens because your way of covering the intersection through fill() will cover only half of the stroke on the fill area's border. This is okay-ish for the rounded part, but the bottom (implicit) lineTo between both arcs will still have its bottom half visible:

const ctx = document.querySelector("canvas").getContext("2d");
ctx.fillStyle = "rgba(255, 0, 0, 0.25)";

ctx.lineTo(30, 50);
ctx.lineTo(60, 50);
ctx.arc(90, 50, 20, Math.PI, 0);
ctx.arc(120, 50, 20, Math.PI, 0);
ctx.lineTo(150, 50);
ctx.lineTo(180, 50);
ctx.stroke();
ctx.fill();

// a zoomed in version in case it's not visible enough
const zoom = document.querySelectorAll("canvas")[1].getContext("2d");
zoom.scale(4, 4);
zoom.imageSmoothingEnabled = false;
zoom.drawImage(ctx.canvas, -70, -20);
canvas{ vertical-align: middle }
<canvas width=200></canvas>zoomed in: <canvas></canvas>

My original thought was to draw rectangles over each overlapping bump section, but a better approach was suggested in the comments: extend the fill slightly downward after stroking, then fill the path with the background color. This ensures the bottom stroke of the overlapping lines are filled as well.

const canvas = document.querySelector("canvas")
const ctx = canvas.getContext("2d");
document.body.style.backgroundColor = "#121212";
ctx.lineWidth = 1;
ctx.fillStyle = "#121212";
ctx.strokeStyle = "#9f9999";
ctx.lineCap = "round";

const {width, height} = canvas;
const step = 30;

for (let y = step; y < height; y += step) {
  ctx.beginPath();

  for (let x = step; x < width; x += step) {
    if (Math.random() < 0.55) {
      ctx.lineTo(x, y);
    }
    else {
      ctx.arc(x, y, 20, Math.PI, 0, false);
    }
  }

  ctx.stroke();
  ctx.lineTo(width - step, y + 1);
  ctx.lineTo(step, y + 1);
  //ctx.fillStyle = "red"; // to debug
  ctx.fill();
}
<canvas></canvas>

Upvotes: 2

Related Questions