The following code canvas rotate rotates. Where is the coordinate point of the rotation? Why is it not at the center point of the element? _html/css_WEB-ITnose

The following code canvas rotate rotates. Where is the coordinate point of the rotation? Why is it not at the center point of the element?

=================================





< style>

<script> <br> <br> function init() <br> { <br> var canvas = document.getElementById('canvas'); <br> var cxt = canvas.getContext('2d'); <br> cxt.strokeStyle = "red"; <br> cxt.strokeRect(300,300,100,100); cxt.rotate( 10*Math.PI/180); <br> cxt.strokeRect(300,300,100,100); <br> cxt.strokeStyle = "green"; <br> cxt.rotate(20*Math.PI/180); <br> cxt .strokeRect(300,300,100,100); <br> } <br> </script>

Reply to the discussion (solution)

Canvas rotation is actually the rotation of the canvas. The center point of rotation is the origin of the canvas, which is point 0,0.

If you want to rotate the center, just set the origin of the canvas.