2

Problem

I struggle to split a CanvasRenderingContext2D.quadraticCurveTo() path lengthwise into two colors.

Question (framings)

  • How can I split the color of a quadratic curve lengthwise?
  • How can a draw two parallel quadratic curves?

Background

The user must draw a line in an annotation tool and indicate polarity based on the line's color (this convention is predefined and can not be changed). Example:

enter image description here

Current best solution

The user specifies N points through which to draw a smooth line (based on this StackOverflow answer). To split the path, I calculate a perpendicular vector for each subpath, merge them to find the average perpendicular vector for the entire path, and redraw the line twice, once shifted up and once shifted down along the perpendicular.

This approach works fine for most curves:

enter image description here enter image description here

However, it fails, e.g., for back curving curves:

enter image description here enter image description here

Next, I would try using a perpendicular gradient as described in this blog. However, the computation seems to be highly inefficient and I would appreciate any hints on how else I could solve this problem.

L.Lauenburg
  • 462
  • 5
  • 19
  • 1
    Use `ctx.clip` use the curve to create a clip boundary (you will need to create a closed path) set `ctx.lineWith` to twice inside line then draw curve with inside color. Recreate a reverse clip (path a `ctx.rect` around it) and then draw outer color – Blindman67 May 29 '22 at 03:24
  • @Blindman67 thank you very much for your reply! I have worked out a new solution based on the information you provided. It is promising and when it is ready I will post it here as an answer. However, at the moment I am stuck due to some strange behavior of clip+arc. I have written a follow-up question. Could you please take a look at it? https://stackoverflow.com/q/72522306/11918697 – L.Lauenburg Jun 06 '22 at 19:36

0 Answers0