I have been struggling for more than a day to get the functionality of selectively rotating a set of tiles that are drawn on a canvas by any number of degrees. I am just not getting it and finally I am asking for help. I need to be able to rotate any tile from its anchor point (top left, top right point)by any degrees.
The main javascript code that is confusing me is when I determine that the tile needs rotated in the following:
function drawTile(context, tile,i) {
TILE_WIDTH=tile.width;
TILE_HEIGHT=tile.height;
// Draw the tile with rounded corners
tile_x_position=tile.x;
tile_y_position=tile.y;
// determine if the tile is rotated
rotation_angle=tile.plot_rotate;
// yes it needs rotated
if (rotation_angle != 0){
radian_value=(Math.PI/180)*rotation_angle;
// get center point of tile to be rotated
vertical= (tile_y_position+TILE_HEIGHT)/2;
horizontal= (tile_x_position+TILE_WIDTH)/2
context.translate( tile_x_position, tile_y_position);
context.rotate(radian_value); // rotate the tile on its center point
}
Then I draw the tile.
When done, I reset things as follows:
if (rotation_angle != 0){
context.rotate(-radian_value);
context.translate( -tile_x_position, -tile_y_position);
}
You can see that it is not doing what I want it to do by looking at the completed javascript code in https://jsfiddle.net/jackmstein/m69sfcrq/1/
I found the problem and fixed the code in the link https://jsfiddle.net/jackmstein/m69sfcrq/5/
It turns out that before you rotate the Canvas, you need to specify the translate reference. I had it incorrectly set to the center of the tile instead of the left most top corner.
tile_x_position=tile.x;
tile_y_position=tile.y;
// determine if the tile is rotated
rotation_angle=tile.plot_rotate;
// yes it needs rotated
if (rotation_angle != 0){
radian_value=(Math.PI/180)*rotation_angle;
// get left most point of tile to be rotated
radian_value=(Math.PI/180)*rotation_angle;
context.translate( tile_x_position, tile_y_position);
//set the new point of reference for the canvas to left top
context.rotate(radian_value); // rotate the tile on the new point
// set the points of reference for the tile to be shown based on the rotated canvas
tile_x_position=0;
tile_y_position=0;
}
Then when you are done drawing the tile, you reset the Canvas as follows:
if (rotation_angle != 0){
context.rotate(-radian_value); //reset everything back
tile_x_position=tile.x;
tile_y_position=tile.y;
context.translate( -tile_x_position, -tile_y_position);
}