1

I want to draw a lot of lines using Canvas.lineTo. The lines will sometimes overlap on themselves and i want its color to alpha blend and "add up" when this happens, as I'm using low opacity e.g. "#fff4".

It seem if i call lineTo for all the lines in a single beginPath-stroke call, the lines will NOT alpha blend. Do i have to use a beginPath-stroke call for every line segment to make sure they alpha blend? This seem less performant. Also now the line edges are jagged (i can use lineCap='round' to make them smoother but then i will see a dot between segments).

How would you solve this optimally?

Also there seem to be a weird inconsistency between Firefox and Chrome. Using the following code:

  ctx.lineWidth = 1.0
  ctx.strokeStyle = '#fff8'
  ctx.beginPath()
  ctx.lineTo(100, 100)
  ctx.lineTo(200, 100)
  ctx.lineTo(150, 100)
  ctx.stroke()

In Firefox, the right line segment is blended with itself (lighter color), but this is not the case in Chrome.

Erlend
  • 1,711
  • 1
  • 22
  • 25
  • 1
    Then it behaves correctly it seems like. I guess i will have to create a bunch of sub paths then to make it blend. Perhaps not optimal for me as i have a very long line and i don't know where the lines will overlap. Perhaps i will have to do a pre-render-phase to sort this out. Anyways, the link was very helpful. Thanks! – Erlend Oct 10 '22 at 14:00

0 Answers0