CODEWITHSUNDEEP
canvashtml5-canvas
Mia
Mia

Reputation: 6531

Drawing width varying bezier curves on HTML5 <canvas> using Javascript

Is it possible in any way to vary line weight like the one in the image for a canvas based drawing app ? Since line width does not have a gradient-like value (different start - different end) I'm looking for the best possible way to get something as close to the image below as possible.

Smooth Line Width

Upvotes: 3

Views: 1546

Answers (1)

Mikko Ohtamaa
Mikko Ohtamaa

Reputation: 83666

HTML5 <canvas> API does not offer such complex functionality.

Your best bet is to write your own line pixel renderer using any kind of algorithms you need. The renderer might be a bit slow, however, because the logic must be implemented in pure Javascript.

In this case the question becomes more generic "how to draw varying width of bezier curves on bitmaps" and Javascript <canvas> is just one implementation of the algorithm.

Example:

How to smoothly vary width at various points of a bezier curve drawn using glDrawArray()

I also suggest you study the source code of open source drawing applications like Inkscape how they do this.

Upvotes: 1

Related Questions