Toggle navigation
☰
HTML
CSS
Scripting
Database
<!DOCTYPE html> <html> <body> <canvas id="transCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"></canvas> <script> var canvas = document.getElementById("transCanvas"); var ctx = canvas.getContext("2d"); // Setting center point for rotation var centerX = 150; var centerY = 75; // Save state ctx.save(); // Translate to the object's center point ctx.translate(centerX, centerY); // Rotate by 45 degrees (converted to radians) ctx.rotate(45 * Math.PI / 180); // Draw a rectangle relative to the new origin ctx.fillStyle = "#FF8C00"; ctx.fillRect(-50, -25, 100, 50); // Restore back to original state ctx.restore(); // Draw a blue border around the canvas area ctx.strokeStyle = "#0070C0"; ctx.strokeRect(centerX - 55, centerY - 30, 110, 60); </script> </body> </html>
