0

I'd like to create a custom parametric function that displays a vector curve, like a Bézier curve. As it is parametric, I can't evaluate the curve on each pixel. How do I display such a curve?

This is my attempt to create an unregular Bézier curve (with changing width). It's a succession of circles with different radius.

CanvasRenderingContext2D.prototype.bezierInk = function(x0, y0, x1, y1, x2, y2, x3, y3, size, steps, random = 1.0) {
  for (var i = 0; i <= 1; i += 1 / steps) {
    var radius = size * (1 - random * Math.random());
    var x = x0 * (1 - i) * (1 - i) * (1 - i) + 3 * x1 * i *(1 - i) * (1 - i) + 3 * x2 * i * i * (1 - i) + x3 * i * i * i; // Bézier
    var y = y0 * (1 - i) * (1 - i) * (1 - i) + 3 * y1 * i *(1 - i) * (1 - i) + 3 * y2 * i * i * (1 - i) + y3 * i * i * i; // Bézier
    this.moveTo(x + radius, y);
    this.arc(x, y, radius, 0, 2 * Math.PI);
  }
  this.fill();
  this.moveTo(x3, y3);
}

I've got two problems:

  • As the function is parametric, the circles are not evenly placed on the curve.
  • The steps parameter must be set in order to define how close the circles are from each other.

Example : http://jsfiddle.net/Scagj/ (try to change the value of steps, try 10 and 1000).

How is a normal Bézier curve displayed? I reckon it is not pixel by pixel…

SteeveDroz
  • 6,006
  • 6
  • 33
  • 65
  • check this link may be useful [1]: http://stackoverflow.com/questions/4340040/html5-canvas-vector-graphics – Cathy Jan 23 '13 at 07:21
  • Would you clarify why you require a custom function? Is it so that the width of the curve would vary along its length or for some other reason? – jing3142 Jan 24 '13 at 14:31
  • In that particular case, an irregular stroke simulates ink. But my question goes far beyond and I intend to create many other similar functions. – SteeveDroz Jan 24 '13 at 18:31

0 Answers0