How to Draw Smooth Curve Through N Points Using JavaScript HTML5 Canvas

Implementing smooth sketching and drawing on the canvas element

I made something like this a while ago and turned it into a jquery plugin.
have a look over here, if it's what you're after I'll post a more detailed answer and dig out the simplified jquery version from my archives:

http://jsfiddle.net/95tft/

EDIT

OK, sorry I couldn't do this yesterday:

Originally the code above was forked from Mr Doob's 'harmony' sketcher over here:
http://mrdoob.com/projects/harmony/#ribbon

(which I think is the best solution).
But I kinda broke it down and remade it for my own purposes on another project. I've hacked my own plugin a bit to make it a bit easier still over here:

http://jsfiddle.net/dh3bj/

The only thing you might want to change is to change it to work on mousedown/mouseup which should be easy also have a look at the settings at the bottom of the plugin, you should be able to get the effect you want by playing with the brush size, colour, alpha (rgba) etc.

Hope that helps

How to automatically generate and draw a smooth curve between two surfaces in JS?

d3-graphviz does all the magic:

• The edges are rendered straight by default, but are automatically bent to avoid other nodes.
• It also has an auto layouting algorithm for layered/hierarchical graphs.
• It uses graphviz (with the help of wasm) under the hood.

Here is an example:

Related Topics