Smooth Jagged Pixels

I've created a pinch filter/effect on canvas using the following algorithm: // iterate pixels for (var i = 0; i < originalPixels.data.length; i+= 4) { // calculate a pixel'

Solution 1:

One way to clean up the result is supersampling. Here's a simple example: https://jsfiddle.net/Lawmo4q8/

Basically, instead of calculating a single value for a single pixel, you take multiple value samples within/around the pixel...

let color =
    calcColor(x - 0.25, y - 0.25) + calcColor(x + 0.25, y - 0.25) +
    calcColor(x - 0.25, y + 0.25) + calcColor(x + 0.25, y + 0.25);

...and merge the results in some way.

color /= 4;