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.

Rotated Image

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);

You have to loop over destination pixels instead of source ones (gaps are the result of looping over source). For each destination pixel you can calculate position in source data, your code for pixel rotation should be inverted. For source pixel you will then get float x and y, on this step you can either round values and sample color from source (and get a bit distorted image), or you can treat fractional parts as parameters for neighbour pixel color interpolation (you get 4 source pixels for each destination pixel and with fractional part you can calculate color in between those pixels). Here is similar question on SO: https://stackoverflow.com/questions/695080/how-do-i-rotate-an-image

And the reason why your algorithm is slow is because you use heavy functions to read and write data for each pixel independently. It is generally more favorable to extract source data into some array (it could be same slow function but callng it once is not a problem) and use second array for data writing. This second array can then be copied to destination image.

  • $\begingroup$ Thank you for your message, Sergio. I have been trying to understand what you're describing and the link you shared, but I haven't been successful. Here is my code: pastebin.com/sWpmkhQZ Would you be able to show some pseudo-code for the 'interpolation' step of this process please? Thank you! $\endgroup$ Jan 26 at 21:10
  • $\begingroup$ Does your code return proper (but not interpolated) color for found pixel in p2? $\endgroup$
    – Sergio
    Jan 27 at 20:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.