javascript - Smooth jagged pixels -

i've created pinch filter/effect on canvas using following algorithm:

// iterate pixels (var = 0; < originalpixels.data.length; i+= 4) {      // calculate pixel's position, distance, , angle     var pixel = new pixel(affectedpixels, i, origin);      // check if pixel in effect area     if (pixel.dist < effectradius) {          // initial method (flawed)         // iterate original pixels , calculate new position of current pixel in affected pixels         if (method.value == "org2aff") {              var targetdist = ( pixel.dist - (1 - pixel.dist / effectradius) * (effectstrength * effectradius) ).clamp(0, effectradius);             var targetpos  = calcpos(origin, pixel.angle, targetdist);              setpixel(affectedpixels, targetpos.x, targetpos.y, getpixel(originalpixels, pixel.pos.x, pixel.pos.y));          } else {              // alternative method (better)             // iterate affected pixels , calculate original position of current pixel in original pixels             var originaldist = (pixel.dist + (effectstrength * effectradius)) / (1 + effectstrength);             var originalpos  = calcpos(origin, pixel.angle, originaldist);              setpixel(affectedpixels, pixel.pos.x, pixel.pos.y, getpixel(originalpixels, originalpos.x, originalpos.y));          }      } else {         // copy unaffected pixels original new image         setpixel(affectedpixels, pixel.pos.x, pixel.pos.y, getpixel(originalpixels, pixel.pos.x, pixel.pos.y));     } } 

i've struggled lot point , i'm quite happy result. nevertheless, have small problem; jagged pixels. compare js pinch gimp's:

i don't know i'm missing. need apply filter after actual filter? or algorithm wrong altogether?

---

i can't add full code here (as snippet) because contains 4 base64 images/textures (65k chars in total). instead, here's jsfiddle.

one way clean result supersampling. here's simple example: https://jsfiddle.net/lawmo4q8/

basically, instead of calculating single value single pixel, take multiple value samples within/around 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 results in way.

color /= 4;