如何修复此图像（逐个像素）失真问题？

Question

我试图扭曲画布中显示的图像，因此它看起来像一个“星球”。但是，我正在努力找到处理失真问题。想到的唯一解决方案是找到一种减少radiusDistance变量的方法，它就越大。那就是说，我不确定如何实现这一目标。有什么建议吗？

以下是我目前用来实现此目的的数学和对象：

polarArray = [];
var polar = function(a,r,c){ //polar object, similar to pixel object.
    this.a = a; //angle
    this.r = r; //radius (distance)
    this.color = c; //color, stored using an object containg r,g,b,a variables
};
loopAllPixels(function(loop){//loop through every pixel, stored in a pixel array
    var pixel = loop.pixel;
    /*each pixel object is structured like this:
        pixel {
            x,
            y,
            color {
                r,
                g,
                b,
                a
            }
        }
    */
    var angle = pixel.x/360*Math.PI;
    var radiusDistance = pixel.y/Math.PI;
    polarArray.push(new polar(angle,radiusDistance,pixel.color));//store polar coordinate pixel + colour.
    pixel.color = new colorRGBA(255,255,255,255);//set background as white.
});
for (var i=0;i<polarArray.length;i++){//loop through polarArray (polar coordinate pixels + colour)
    var p = polarArray[i]; //polar pixel
    var x = (p.r*Math.cos(p.a))+(canvas.width/2); //x coordinate
    var y = (p.r*Math.sin(p.a))+(canvas.height/2); //y coordinate
    if (setpixel(x,y,p.color)==true){ //set pixel at location.
        continue;
    }
    break;

}
updatePixelsToContext();//draw to canvas

这是它当前产生的效果（请注意，我在将图像应用到画布之前将其水平翻转，在此示例中，我使用洋红色的颜色设置背景，以便更清楚地说明问题）：

注意： 我打算翘曲效果，而不是由不获得所需的所有必要像素数据引起的像素“翻录”。

还要记住，速度和效率在此尚未成为我的首选。