CODEWITHSUNDEEP
javascriptcanvasdrawing2dgenerative-artlineto
Erlend
Erlend

Reputation: 1969

Canvas lineTo drawing and blending

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.

Upvotes: 1

Views: 15

Answers (0)

Related Questions