# Custom Bezier Tool for Pixel Art

Try it here.

In my pursuit to render a well-aliased bezier curve for a pixel art tool, I came upon a paper on rasterizing curves by Alois Zingl. The paper covers many types of curves, but I’m just going to focus on quadratic bezier curves. The code in the paper is written in C++, so I translated the code into JavaScript for my purposes. I highly recommend reading the paper, as it explains the concepts very thoroughly.

A bezier curve is defined parametrically, so it can’t be defined with y as a function of x. Instead, you define x and y separately as a function of t. t represents time, or the progress along the curve, and is limited to a value between 0 and 1. The general idea of this algorithm is to subdivide a bezier curve into segments that don’t change gradient (In other words, the slope of the curve remains in a single quadrant). Then, we can use Bresenham’s algorithm to plot each curve segment.

P1 represents the control point, whereas P0 and P2 are the endpoints. The references to P4 to P8 can be understood by following the diagram in the paper where the curve is subdivided into up to 3 separate curves. Thus, there are 9 points in total, from P0 to P8.