Back
Syntax
Study
Editor
Mode:
HTML
CSS
JavaScript
PHP
Reset
Run »
HTML / CSS / JS
const ctx = canvas.getContext("2d"); ctx.save(); // Save current state ctx.translate(200, 200); // Move origin to center ctx.rotate(Math.PI / 4); // Rotate 45 degrees ctx.fillStyle = "#dc3545"; ctx.fillRect(-50, -30, 100, 60); // Draw centered rectangle ctx.restore(); // Restore original state // Next drawing is unaffected by the rotation ctx.fillStyle = "#007bff"; ctx.fillRect(20, 20, 80, 80);
Result
Open