how to draw smooth curve through N points using javascript HTML5 canvas

Question

For a drawing application  I m saving the mouse movement coordinates to an array then drawing them with lineTo   The resulting line is not smooth   How can I produce a single curve between all the gathered points       I ve googled but I have only found 3 functions for drawing lines  For 2 sample points  simply use lineTo   For 3 sample points quadraticCurveTo  for 4 sample points  bezierCurveTo      I tried drawing a bezierCurveTo for every 4 points in the array  but this leads to kinks every 4 sample points  instead of a continuous smooth curve    How do I write a function to draw a smooth curve with 5 sample points and beyond

User · Answer

Give KineticJS a try - you can define a Spline with an array of points. Here's an example:

Old url: http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-spline-tutorial/

See archive url: https://web.archive.org/web/20141204030628/http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-spline-tutorial/

User · Answer

The first answer will not pass through all the points  This graph will exactly pass through all the points and will be a perfect curve with the points as   x  y    n such points   var points     x 1 y 1   x 2 y 3   x 3 y 4   x 4 y 2   x 5 y 6     took 5 example points ctx moveTo  points 0  x   points 0  y    for var i   0  i  lt  points length-1  i          var x mid    points i  x   points i 1  x    2    var y mid    points i  y   points i 1  y    2    var cp x1    x mid   points i  x    2    var cp x2    x mid   points i 1  x    2    ctx quadraticCurveTo cp x1 points i  y  x mid  y mid     ctx quadraticCurveTo cp x2 points i 1  y  points i 1  x points i 1  y

User · Answer

As Daniel Howard points out  Rob Spencer describes what you want at http   scaledinnovation com analytics splines aboutSplines html   Here s an interactive demo  http   jsbin com ApitIxo 2   Here it is as a snippet in case jsbin is down    x000D   x000D   lt  DOCTYPE html gt  x000D       lt html gt  x000D         lt head gt  x000D           lt meta charset utf-8   gt  x000D           lt title gt Demo smooth connection lt  title gt  x000D         lt  head gt  x000D         lt body gt  x000D           lt div id  display  gt  x000D            Click to build a smooth path   x000D             See Rob Spencer s  lt a href  http   scaledinnovation com analytics splines aboutSplines html  gt article lt  a gt   x000D             lt br gt  lt label gt  lt input type  checkbox  id  showPoints  checked gt  Show points lt  label gt  x000D             lt br gt  lt label gt  lt input type  checkbox  id  showControlLines  checked gt  Show control lines lt  label gt  x000D             lt br gt  x000D             lt label gt  x000D               lt input type  range  id  tension  min  -1  max  2  step   1  value   5   gt  Tension  lt span id  tensionvalue  gt  0 5  lt  span gt  x000D             lt  label gt  x000D           lt div id  mouse  gt  lt  div gt  x000D           lt  div gt  x000D           lt canvas id  canvas  gt  lt  canvas gt  x000D           lt style gt  x000D            html   position  relative  height  100   width  100     x000D            body   position  absolute  left  0  right  0  top  0  bottom  0     x000D            canvas   outline  1px solid red    x000D             display   position  fixed  margin  8px  background  white  z-index  1    x000D           lt  style gt  x000D           lt script gt  x000D            function update     x000D                 tensionvalue   innerHTML        tension   value      x000D              drawSplines    x000D              x000D               showPoints   onchange      showControlLines   onchange      tension   onchange   update  x000D         x000D               utility function x000D            function   id   return document getElementById id     x000D            var canvas    canvas    ctx canvas getContext  2d    x000D   x000D            function setCanvasSize     x000D              canvas width   parseInt window getComputedStyle document body  width   x000D              canvas height   parseInt window getComputedStyle document body  height   x000D              x000D            window onload   window onresize   setCanvasSize    x000D         x000D            function mousePositionOnCanvas e    x000D              var el e target  c el  x000D              var scaleX   c width c offsetWidth    1  x000D              var scaleY   c height c offsetHeight    1  x000D             x000D              if   isNaN e offsetX    x000D                return   x e offsetX scaleX  y e offsetY scaleY    x000D             x000D              var x e pageX  y e pageY  x000D              do   x000D                x -  el offsetLeft  x000D                y -  el offsetTop  x000D                el   el offsetParent  x000D                while  el   x000D              return   x  x scaleX  y  y scaleY    x000D              x000D         x000D            canvas onclick   function e   x000D              var p   mousePositionOnCanvas e   x000D              addSplinePoint p x  p y   x000D               x000D         x000D            function drawPoint x y color   x000D              ctx save    x000D              ctx fillStyle color  x000D              ctx beginPath    x000D              ctx arc x y 3 0 2 Math PI   x000D              ctx fill   x000D              ctx restore    x000D              x000D            canvas onmousemove   function e    x000D              var p   mousePositionOnCanvas e   x000D                 mouse   innerHTML   p x     p y  x000D               x000D         x000D            var pts        a list of x and ys x000D   x000D               given an array of x y s  return distance between any two  x000D               note that i and j are indexes to the points  not directly into the array  x000D            function dista arr  i  j    x000D              return Math sqrt Math pow arr 2 i -arr 2 j   2    Math pow arr 2 i 1 -arr 2 j 1   2    x000D              x000D   x000D               return vector from i to j where i and j are indexes pointing into an array of points  x000D            function va arr  i  j   x000D              return  arr 2 j -arr 2 i   arr 2 j 1 -arr 2 i 1   x000D              x000D         x000D            function ctlpts x1 y1 x2 y2 x3 y3    x000D              var t      tension   value  x000D              var v   va arguments  0  2   x000D              var d01   dista arguments  0  1   x000D              var d12   dista arguments  1  2   x000D              var d012   d01   d12  x000D              return  x2 - v 0    t   d01   d012  y2 - v 1    t   d01   d012  x000D                      x2   v 0    t   d12   d012  y2   v 1    t   d12   d012    x000D              x000D   x000D            function addSplinePoint x  y   x000D              pts push x   pts push y   x000D              drawSplines    x000D              x000D            function drawSplines     x000D              clear    x000D              cps          There will be two control points for each  middle  point  1     len-2e x000D              for  var i   0  i  lt  pts length - 2  i    1    x000D                cps   cps concat ctlpts pts 2 i   pts 2 i 1    x000D                                        pts 2 i 2   pts 2 i 3    x000D                                        pts 2 i 4   pts 2 i 5     x000D                x000D              if     showControlLines   checked  drawControlPoints cps   x000D              if     showPoints   checked  drawPoints pts   x000D       x000D              drawCurvedPath cps  pts   x000D    x000D              x000D            function drawControlPoints cps    x000D              for  var i   0  i  lt  cps length  i    4    x000D                showPt cps i   cps i 1    pink    x000D                showPt cps i 2   cps i 3    pink    x000D                drawLine cps i   cps i 1   cps i 2   cps i 3    pink    x000D                 x000D              x000D         x000D            function drawPoints pts    x000D              for  var i   0  i  lt  pts length  i    2    x000D                showPt pts i   pts i 1    black    x000D                 x000D              x000D         x000D            function drawCurvedPath cps  pts   x000D              var len   pts length   2     number of points x000D              if  len  lt  2  return  x000D              if  len    2    x000D                ctx beginPath    x000D                ctx moveTo pts 0   pts 1    x000D                ctx lineTo pts 2   pts 3    x000D                ctx stroke    x000D                x000D              else   x000D                ctx beginPath    x000D                ctx moveTo pts 0   pts 1    x000D                   from point 0 to point 1 is a quadratic x000D                ctx quadraticCurveTo cps 0   cps 1   pts 2   pts 3    x000D                   for all middle points  connect with bezier x000D                for  var i   2  i  lt  len-1  i    1    x000D                     console log  to   pts 2 i   pts 2 i 1    x000D                  ctx bezierCurveTo  x000D                    cps  2  i-1 -1  2   cps  2  i-1 -1  2 1   x000D                    cps  2  i-1   2   cps  2  i-1   2 1   x000D                    pts i 2   pts i 2 1    x000D                  x000D                ctx quadraticCurveTo  x000D                  cps  2  i-1 -1  2   cps  2  i-1 -1  2 1   x000D                  pts i 2   pts i 2 1    x000D                ctx stroke    x000D                x000D              x000D            function clear     x000D              ctx save    x000D                 use alpha to fade out x000D              ctx fillStyle    rgba 255 255 255  7       clear screen x000D              ctx fillRect 0 0 canvas width canvas height   x000D              ctx restore    x000D              x000D         x000D            function showPt x y fillStyle    x000D              ctx save    x000D              ctx beginPath    x000D              if  fillStyle    x000D                ctx fillStyle   fillStyle  x000D                x000D              ctx arc x  y  5  0  2 Math PI   x000D              ctx fill    x000D              ctx restore    x000D              x000D   x000D            function drawLine x1  y1  x2  y2  strokeStyle   x000D              ctx beginPath    x000D              ctx moveTo x1  y1   x000D              ctx lineTo x2  y2   x000D              if  strokeStyle    x000D                ctx save    x000D                ctx strokeStyle   strokeStyle  x000D                ctx stroke    x000D                ctx restore    x000D                x000D              else   x000D                ctx save    x000D                ctx strokeStyle    pink   x000D                ctx stroke    x000D                ctx restore    x000D                x000D              x000D   x000D           lt  script gt  x000D   x000D   x000D         lt  body gt  x000D       lt  html gt  x000D   x000D   x000D

User · Answer

The problem with joining subsequent sample points together with disjoint  curveTo  type functions  is that where the curves meet is not smooth   This is because the two curves share an end point but are influenced by completely disjoint control points   One solution is to  curve to  the midpoints between the next 2 subsequent sample points   Joining the curves using these new interpolated points gives a smooth transition at the end points  what is an end point for one iteration becomes a control point for the next iteration    In other words the two disjointed curves have much more in common now   This solution was extracted out of the book  Foundation ActionScript 3 0 Animation  Making things move    p 95 - rendering techniques  creating multiple curves   Note  this solution does not actually draw through each of the points  which was the title of my question  rather it approximates the curve through the sample points but never goes through the sample points   but for my purposes  a drawing application   it s good enough for me and visually you can t tell the difference   There is a solution to go through all the sample points  but it is much more complicated  see http   www cartogrammar com blog actionscript-curves-update    Here is the the drawing code for the approximation method      move to the first point    ctx moveTo points 0  x  points 0  y        for  i   1  i  lt  points length - 2  i                var xc    points i  x   points i   1  x    2        var yc    points i  y   points i   1  y    2        ctx quadraticCurveTo points i  x  points i  y  xc  yc            curve through the last two points  ctx quadraticCurveTo points i  x  points i  y  points i 1  x points i 1  y

User · Answer

Incredibly late but inspired by Homan s brilliantly simple answer  allow me to post a more general solution  general in the sense that Homan s solution crashes on arrays of points with less than 3 vertices    function smooth ctx  points        if points    undefined    points length    0                return true            if points length    1                ctx moveTo points 0  x  points 0  y           ctx lineTo points 0  x  points 0  y           return true            if points length    2                ctx moveTo points 0  x  points 0  y           ctx lineTo points 1  x  points 1  y           return true            ctx moveTo points 0  x  points 0  y       for  var i   1  i  lt  points length - 2  i                   var xc    points i  x   points i   1  x    2          var yc    points i  y   points i   1  y    2          ctx quadraticCurveTo points i  x  points i  y  xc  yc             ctx quadraticCurveTo points i  x  points i  y  points i 1  x  points i 1  y

User · Answer

This code is perfect for me  this context beginPath    this context moveTo data 0  x  data 0  y   for  let i   1  i  lt  data length  i        this context bezierCurveTo      data i - 1  x    data i  x - data i - 1  x    2      data i - 1  y      data i - 1  x    data i  x - data i - 1  x    2      data i  y      data i  x      data i  y      you have correct smooth line and correct endPoints NOTICE   y    quot canvas height quot  - y

User · Answer

I found this to work nicely  function drawCurve points  tension        ctx beginPath        ctx moveTo points 0  x  points 0  y        var t    tension    null    tension   1      for  var i   0  i  lt  points length - 1  i              var p0    i  gt  0    points i - 1    points 0           var p1   points i           var p2   points i   1           var p3    i    points length - 2    points i   2    p2           var cp1x   p1 x    p2 x - p0 x    6   t          var cp1y   p1 y    p2 y - p0 y    6   t           var cp2x   p2 x -  p3 x - p1 x    6   t          var cp2y   p2 y -  p3 y - p1 y    6   t           ctx bezierCurveTo cp1x  cp1y  cp2x  cp2y  p2 x  p2 y             ctx stroke

User · Answer

To add to K3N s cardinal splines method and perhaps address T  J  Crowder s concerns about curves  dipping  in misleading places  I inserted the following code in the getCurvePoints   function  just before res push x    if   y  lt   pts i 1   amp  amp  y  lt   pts i 3       y  gt   pts i 1   amp  amp  y  gt   pts i 3          y     pts i 1     pts i 3     2    if   x  lt   pts i   amp  amp  x  lt   pts i 2       x  gt   pts i   amp  amp  x  gt   pts i 2          x     pts i     pts i 2     2      This effectively creates a  invisible  bounding box between each pair of successive points and ensures the curve stays within this bounding box - ie  if a point on the curve is above below left right of both points  it alters its position to be within the box  Here the midpoint is used  but this could be improved upon  perhaps using linear interpolation

User · Answer

If you want to determine the equation of the curve through n points then the following code will give you the coefficients of the polynomial of degree n-1 and save these coefficients to the coefficients   array  starting from the constant term   The x coordinates do not have to be in order  This is an example of a Lagrange polynomial   var xPoints  2 4 3 6 7 10     example coordinates var yPoints  2 5 -2 0 2 8   var coefficients     for  var m 0  m lt xPoints length  m    coefficients m  0      for  var m 0  m lt xPoints length  m              var newCoefficients             for  var nc 0  nc lt xPoints length  nc    newCoefficients nc  0          if  m gt 0                newCoefficients 0  -xPoints 0   xPoints m -xPoints 0                newCoefficients 1  1  xPoints m -xPoints 0          else           newCoefficients 0  -xPoints 1   xPoints m -xPoints 1            newCoefficients 1  1  xPoints m -xPoints 1              var startIndex 1       if  m  0  startIndex 2       for  var n startIndex  n lt xPoints length  n              if  m  n  continue          for  var nc xPoints length-1  nc gt  1  nc--            newCoefficients nc  newCoefficients nc   -xPoints n   xPoints m -xPoints n    newCoefficients nc-1   xPoints m -xPoints n                      newCoefficients 0  newCoefficients 0   -xPoints n   xPoints m -xPoints n                   for  var nc 0  nc lt xPoints length  nc    coefficients nc   yPoints m  newCoefficients nc

User · Answer

I decide to add on  rather than posting my solution to another post  Below are the solution that I build  may not be perfect  but so far the output are good   Important  it will pass through all the points   If you have any idea  to make it better  please share to me  Thanks   Here are the comparison of before after     Save this code to HTML to test it out    x000D   x000D       lt  DOCTYPE html gt  x000D       lt html gt  x000D       lt body gt  x000D        lt canvas id  myCanvas  width  1200  height  700  style  border 1px solid  d3d3d3   gt Your browser does not support the HTML5 canvas tag  lt  canvas gt  x000D        lt script gt  x000D        var cv   document getElementById  myCanvas    x000D        var ctx   cv getContext  2d    x000D       x000D        function gradient a  b    x000D         return  b y-a y   b x-a x   x000D          x000D       x000D        function bzCurve points  f  t    x000D           f   0  will be straight line x000D           t suppose to be 1  but changing the value can control the smoothness too x000D         if  typeof f      undefined   f   0 3  x000D         if  typeof t      undefined   t   0 6  x000D       x000D         ctx beginPath    x000D         ctx moveTo points 0  x  points 0  y   x000D       x000D         var m   0  x000D         var dx1   0  x000D         var dy1   0  x000D       x000D         var preP   points 0   x000D         for  var i   1  i  lt  points length  i      x000D          var curP   points i   x000D          nexP   points i   1   x000D          if  nexP    x000D           m   gradient preP  nexP   x000D           dx2    nexP x - curP x    -f  x000D           dy2   dx2   m   t  x000D            else   x000D           dx2   0  x000D           dy2   0  x000D            x000D          ctx bezierCurveTo preP x - dx1  preP y - dy1  curP x   dx2  curP y   dy2  curP x  curP y   x000D          dx1   dx2  x000D          dy1   dy2  x000D          preP   curP  x000D           x000D         ctx stroke    x000D          x000D       x000D           Generate random data x000D        var lines       x000D        var X   10  x000D        var t   40    to control width of X x000D        for  var i   0  i  lt  100  i       x000D         Y   Math floor  Math random     300    50   x000D         p     x  X  y  Y    x000D         lines push p   x000D         X   X   t  x000D          x000D       x000D          draw straight line x000D        ctx beginPath    x000D        ctx setLineDash  5    x000D        ctx lineWidth   1  x000D        bzCurve lines  0  1   x000D       x000D          draw smooth line x000D        ctx setLineDash  0    x000D        ctx lineWidth   2  x000D        ctx strokeStyle    blue   x000D        bzCurve lines  0 3  1   x000D        lt  script gt  x000D       lt  body gt  x000D       lt  html gt  x000D   x000D   x000D

User · Answer

A bit late  but for the record   You can achieve smooth lines by using cardinal splines  aka canonical spline  to draw smooth curves that goes through the points   I made this function for canvas - it s split into three function to increase versatility  The main wrapper function looks like this   function drawCurve ctx  ptsa  tension  isClosed  numOfSegments  showPoints         showPoints    showPoints   showPoints   false       ctx beginPath         drawLines ctx  getCurvePoints ptsa  tension  isClosed  numOfSegments         if  showPoints            ctx stroke            ctx beginPath            for var i 0 i lt ptsa length-1 i  2                   ctx rect ptsa i  - 2  ptsa i 1  - 2  4  4             To draw a curve have an array with x  y points in the order  x1 y1  x2 y2     xn yn   Use it like this   var myPoints    10 10  40 30  100 10     minimum two points var tension   1   drawCurve ctx  myPoints     default tension 0 5 drawCurve ctx  myPoints  tension     The function above calls two sub-functions  one to calculate the smoothed points  This returns an array with new points - this is the core function which calculates the smoothed points   function getCurvePoints pts  tension  isClosed  numOfSegments            use input value if provided  or use a default value        tension    typeof tension     undefined     tension   0 5      isClosed   isClosed   isClosed   false      numOfSegments   numOfSegments   numOfSegments   16       var  pts       res             clone array         x  y               our x y coords         t1x  t2x  t1y  t2y     tension vectors         c1  c2  c3  c4         cardinal points         st  t  i           steps based on num  of segments         clone array so we don t change the original             pts   pts slice 0           The algorithm require a previous and next point to the actual point array         Check if we will draw closed or open curve         If closed  copy end points to beginning and first points to end        If open  duplicate first points to befinning  end points to end     if  isClosed             pts unshift pts pts length - 1             pts unshift pts pts length - 2             pts unshift pts pts length - 1             pts unshift pts pts length - 2             pts push pts 0             pts push pts 1              else            pts unshift pts 1        copy 1  point and insert at beginning          pts unshift pts 0             pts push pts pts length - 2      copy last point and append          pts push pts pts length - 1                  ok  lets start           1  loop goes through point array        2  loop goes through each segment between the 2 pts   1e point before and after     for  i 2  i  lt    pts length - 4   i  2            for  t 0  t  lt   numOfSegments  t                      calc tension vectors             t1x     pts i 2  -  pts i-2     tension              t2x     pts i 4  -  pts i     tension               t1y     pts i 3  -  pts i-1     tension              t2y     pts i 5  -  pts i 1     tension                  calc step             st   t   numOfSegments                  calc cardinals             c1     2   Math pow st  3   - 3   Math pow st  2    1               c2   - 2   Math pow st  3     3   Math pow st  2                c3         Math pow st  3   - 2   Math pow st  2    st               c4         Math pow st  3   -     Math pow st  2                   calc x and y cords with common control vectors             x   c1    pts i       c2    pts i 2    c3   t1x   c4   t2x              y   c1    pts i 1     c2    pts i 3    c3   t1y   c4   t2y                 store points in array             res push x               res push y                         return res      And to actually draw the points as a smoothed curve  or any other segmented lines as long as you have an x y array    function drawLines ctx  pts        ctx moveTo pts 0   pts 1        for i 2 i lt pts length-1 i  2  ctx lineTo pts i   pts i 1         x000D   x000D  var ctx   document getElementById  c   getContext  2d    x000D   x000D   x000D  function drawCurve ctx  ptsa  tension  isClosed  numOfSegments  showPoints    x000D   x000D    ctx beginPath    x000D   x000D    drawLines ctx  getCurvePoints ptsa  tension  isClosed  numOfSegments    x000D     x000D    if  showPoints    x000D      ctx beginPath    x000D      for var i 0 i lt ptsa length-1 i  2   x000D        ctx rect ptsa i  - 2  ptsa i 1  - 2  4  4   x000D      x000D   x000D    ctx stroke    x000D    x000D   x000D   x000D  var myPoints    10 10  40 30  100 10  200  100  200  50  250  120     minimum two points x000D  var tension   1  x000D   x000D  drawCurve ctx  myPoints     default tension 0 5 x000D  drawCurve ctx  myPoints  tension   x000D   x000D   x000D  function getCurvePoints pts  tension  isClosed  numOfSegments    x000D   x000D       use input value if provided  or use a default value   x000D    tension    typeof tension     undefined     tension   0 5  x000D    isClosed   isClosed   isClosed   false  x000D    numOfSegments   numOfSegments   numOfSegments   16  x000D   x000D    var  pts       res          clone array x000D        x  y       our x y coords x000D        t1x  t2x  t1y  t2y     tension vectors x000D        c1  c2  c3  c4      cardinal points x000D        st  t  i      steps based on num  of segments x000D   x000D       clone array so we don t change the original x000D       x000D     pts   pts slice 0   x000D   x000D       The algorithm require a previous and next point to the actual point array  x000D       Check if we will draw closed or open curve  x000D       If closed  copy end points to beginning and first points to end x000D       If open  duplicate first points to befinning  end points to end x000D    if  isClosed    x000D       pts unshift pts pts length - 1    x000D       pts unshift pts pts length - 2    x000D       pts unshift pts pts length - 1    x000D       pts unshift pts pts length - 2    x000D       pts push pts 0    x000D       pts push pts 1    x000D      x000D    else   x000D       pts unshift pts 1      copy 1  point and insert at beginning x000D       pts unshift pts 0    x000D       pts push pts pts length - 2      copy last point and append x000D       pts push pts pts length - 1    x000D      x000D   x000D       ok  lets start   x000D   x000D       1  loop goes through point array x000D       2  loop goes through each segment between the 2 pts   1e point before and after x000D    for  i 2  i  lt    pts length - 4   i  2    x000D      for  t 0  t  lt   numOfSegments  t      x000D   x000D           calc tension vectors x000D        t1x     pts i 2  -  pts i-2     tension  x000D        t2x     pts i 4  -  pts i     tension  x000D   x000D        t1y     pts i 3  -  pts i-1     tension  x000D        t2y     pts i 5  -  pts i 1     tension  x000D   x000D           calc step x000D        st   t   numOfSegments  x000D   x000D           calc cardinals x000D        c1     2   Math pow st  3   - 3   Math pow st  2    1   x000D        c2   - 2   Math pow st  3     3   Math pow st  2    x000D        c3       Math pow st  3  - 2   Math pow st  2    st   x000D        c4       Math pow st  3  -    Math pow st  2   x000D   x000D           calc x and y cords with common control vectors x000D        x   c1    pts i    c2    pts i 2    c3   t1x   c4   t2x  x000D        y   c1    pts i 1    c2    pts i 3    c3   t1y   c4   t2y  x000D   x000D          store points in array x000D        res push x   x000D        res push y   x000D   x000D        x000D      x000D   x000D    return res  x000D    x000D   x000D  function drawLines ctx  pts    x000D    ctx moveTo pts 0   pts 1    x000D    for i 2 i lt pts length-1 i  2  ctx lineTo pts i   pts i 1    x000D    x000D  canvas   border  1px solid red    x000D   lt canvas id  c  gt  lt canvas gt  x000D   x000D   x000D    This results in this     You can easily extend the canvas so you can call it like this instead   ctx drawCurve myPoints     Add the following to the javascript   if  CanvasRenderingContext2D     undefined         CanvasRenderingContext2D prototype drawCurve            function pts  tension  isClosed  numOfSegments  showPoints           drawCurve this  pts  tension  isClosed  numOfSegments  showPoints       You can find a more optimized version of this on NPM  npm i cardinal-spline-js  or on GitLab

[javascript] how to draw smooth curve through N points using javascript HTML5 canvas?

Examples related to javascript

Examples related to canvas

Examples related to html5-canvas

Examples related to bezier

Examples related to spline