Canvas Transformations
<!DOCTYPE html> <html> <body> <canvas id="scene" width="300" height="300" style="border:1px solid #ccc;"></canvas> <script> const canvas = document.getElementById('scene'); const ctx = canvas.getContext('2d'); function drawRotatedSquare(cx, cy, size, angleInRadians) { ctx.save(); ctx.translate(cx, cy); // move origin to the square's center ctx.rotate(angleInRadians); // rotate around that new origin ctx.fillStyle = '#3b82f6'; ctx.fillRect(-size / 2, -size / 2, size, size); // draw centered on origin ctx.restore(); } drawRotatedSquare(150, 150, 80, Math.PI / 6); // 30 degrees </script> </body> </html>