title: Drawing aliased, pixel-perfect 1px splines (Catmull-Rom, specifically)
body: <p>A brief background: I'm working on a web-based drawing application and need to draw 1px thick splines that pass through their control points.</p>
  
  <p>The issue I'm struggling with is that I need to draw each of the pixels between p1 and p2 as if I were using a 1px pencil tool. So, no anti-aliasing and one pixel at a time. This needs to be done manually without the use of any line/curve library code as my brush system depends upon having a pixel coordinate to apply the brush tip to the canvas.</p>
  
  <p>Essentially, I need to combine the one pixel stepping from something like the Bresenham algorithm with the coordinates returned by the Catmull-Rom equation. I'm having trouble because the Catmull-Rom points are not uniformly distributed (so I can't just say there should be 100 pixels in the curve and run the equation 100 times). I tried using an estimated starting value of the maximum of the X and Y deltas and filling in the gaps with Bresenham, but due to rounding I still end up with some "dirty" sections (ie. the line is clearly moving up and to the right but I still get two pixels with the same Y component, resulting in a "fat" section of the line).</p>
  
  <p>I'm positive this has been solved because nearly every graphics program that draws splines has to support the clean pixel curves that I'm after. After quite a bit of math research, though, I'm a bit confused and still without a solution. Any advice?</p>
  
  <p>EDIT: Here's an example of a curve that I might have to render:</p>
  
  <p><img src="https://i.stack.imgur.com/9Qlom.jpg" alt="alt text"></p>
  
  <p>Which might have an expected result looking like this (note that this is an estimate):</p>
  
  <p><img src="https://i.stack.imgur.com/tOeuw.jpg" alt="alt text"></p>
  
  <p>Using the Catmull-Rom spline equation, we need four points to create a segment. P0 and P3 are used as tangents for incoming and outgoing direction from the P1->P2 segment. With a Catmull-Rom spline, the blue section is all that gets interpolated as t moves from 0 to 1. P0 and P3 can be duplicated to ensure that the green portion gets rendered, so that is not an issue for me.</p>
  
  <p>For simplicity's sake, I need to render the pixels on the curve between P1 and P2, given that I have tangents in the form of P0 and P3. I don't necessarily need to use Catmull-Rom splines, but they seem to be the right tool for this job being that control points must be passed through. The non-uniform distribution of interpolation points is what's throwing me for a loop.</p>
  
  <p>EDIT2: Here's an example of what I mean when I say my resulting curve is dirty:</p>
  
  <p><img src="https://i.stack.imgur.com/dZICf.jpg" alt="alt text"></p>
  
  <p>The red arrows point out a few locations where there should not be a pixel. This is occurring because the X and Y components of the coordinate that get calculated do not change at the same rate. So, when each of the components gets rounded (so I have an exact pixel location) it can be the case that either X or Y doesn't get bumped up because the calculated coordinate is, say, (42.4999, 50.98). Swapping the round for a floor or ceil doesn't solve the problem, as it just changes where it occurs.</p>