Skip to content

Latest commit

 

History

History
78 lines (56 loc) · 2.58 KB

conic-curve-to.md

File metadata and controls

78 lines (56 loc) · 2.58 KB
Raw

ConicCurveTo

Status: explainer.

Draw curves based on conic sections. These are useful as they can represent circular, elliptical and hyperbolic paths whereas bezier curves are limited to quadratic arcs.

Rationale

Conic curves are lower level primitives to beziers. They allow a better description of more times of curves.

Proposal

interface mixin Canvas {
  // all doubles are unrestricted.
  void conicCurveTo(double cpx, double cpy, double x, double y, double weight);
};

This is a similar interface to bezierCurveTo. conicCurveTo defines a curve from the starting point (P0) to destination point (P2) that bends towards control point (P1) as weighted by weight:

Conic curve example

Fig 1 - Points on a conic curve Source

  • x, y are the coordinates of P2.
  • cpx, cpy are the coordinates of P1.
  • weight defines how much the line bends towards P1:
    • weight = 0 defines a straight line from the P0 to P2.
    • weight = 1 defines a quadratic path.
    • weight < 1 is elliptical, while weight > 1 is hyperbolic.
    • weight = infinity essentially makes two line segments P0P1 and P1P2.

If P0, P1 and P2 are all the corners of a square, then weight = sqrt(2)/2 defines a circular arc. This can be used for rounded corners.

The mathematical derivation of these quantities can be found here.

Open issues and questions

  • How much demand is there for this among developers
  • This is already implemented by Skia, but are there performance implications?

Example usage

// Javascript example
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.moveTo(100, 100); // Starting Point is (100, 100)
// Control Point is (200, 100)
// End Point is (200, 200)
// Weight is 1
ctx.conicCurveTo(200, 100, 200, 200, 1);
ctx.stroke();

The above code will produce the following curve, shown in green. Lines pc and cd are shown in black:

References