# Rotating a Bitmap

I would like to rotate an bitmap image using math. I have two issues with my current implementation: the pixel-by-pixel rotation of the copied bitmap is extremely slow and it is leaving gaps between the pixels.

Is there a faster method for copying the bitmap data at an angle that would not have the gaps? This does not have to be specific to Javascript, so any algorithms in any languages are welcome. Please let me know if you have any questions. Thank you.

  cos = Math.cos(-rotation);
sin = Math.sin(-rotation);

//setting the center of rotation
cx = canvas.width/2;
cy = canvas.height/2;

for (x = 0; x < canvas.width; x++)
{
for (y = 0; y < canvas.height; y++)
{
//looping through the original bitmap's pixels
var imgd = ctx.getImageData(x, y, 1, 1); //getting the pixels' colors 1-by-1
var pix = imgd.data;
var red = pix[0];
var green = pix[1];
var blue = pix[2];
var alpha = pix[3];
//rotating and offsetting the pixels by the new rotated dimensions
nx = ((cos * (x-cx)) + (sin * (y - cy))+canvas2.width/2);
ny = ((cos * (y-cy)) - (sin * (x - cx))+canvas2.height/2);
//putting the transformed pixel in the new bitmap
ctx2.putImageData(imgd, nx, ny);
}
}