How do I use JavaScript in HackerRank

Javascript canvas: rotate several objects at the same time

I have dealt with animations in Javascript canvas several times in the last few months. It was only recently that I became aware of the “transformations” area in the canvas library. This includes the functions

  • Save()
  • restore ()
  • translate ()
  • rotate ()
  • scale ()

 
More information: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Transformations

To study how to deal with transformations, I thought of the following example: A red and a green square should rotate independently in different directions.

We start with a red square which is at position (x = 50, y = 50) and has a height and width of 50px. I use the canvas function “rect”: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/rect


The square should now be inclined 5 degrees to the right. The canvas function “rotate” can be used for this, with which the canvas can be rotated around its origin.


Test different angles in the code box above by trying the values ​​10, 15, 20 etc. instead of 5! You will notice that the square rotates around the origin, i.e. around the top left corner.

In order for the square to correctly rotate “around itself”, the origin must be before rotation can be placed in the middle of the square, i.e. at the position (x = 75, y = 75). We use the canvas function “translate” for this. After calling “translate”, the point (x = 0, y = 0) is in the middle of the square and the top left corner of the square is at (x = -25, y = -25). The call “rect” for drawing the square must therefore be changed accordingly.

Now we have the problem that the “clearRect” function does not work properly if the canvas is rotated and its origin has been moved. This means that clearRect now also refers to the transformed canvas and not to our original canvas. We need the function so that the rectangle can be redrawn as often as desired with different settings, e.g. if you change the angle1 and then click "Execute" again. In an animation, too, the entire canvas area must be erased and redrawn in a certain millisecond interval.

To fix this, we use the “save” function to temporarily save the current state of the canvas (rotation and origin). After we have drawn our square, we restore the state with “restore”. The changes made with translate and rotate are then reset (which does not affect the square just drawn).

Now test the code for different angles:


I am now introducing a second, green square, which is also rotated by a certain angle (angle2).


It's not far to animation now. Two steps are still necessary:

  • The function “rotateObjects” is no longer called just once, but repeatedly in a time interval of e.g. 10ms. I use “setInterval” to define the interval.
  • With each interval call, the angles angle1 and angle2 must be slightly increased or decreased so that the effect of a rotation occurs.

Note: If you now click “Run” several times, problems will arise.

The whole file is available for download here: Dreh.html