Toggle navigation
☰
HTML
CSS
Scripting
Database
<!DOCTYPE html> <html> <body> <canvas id="stateCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"></canvas> <script> var canvas = document.getElementById("stateCanvas"); var ctx = canvas.getContext("2d"); // Initial state: Black fill ctx.fillStyle = "#000"; ctx.fillRect(10, 10, 50, 50); // Save the state (black fill) ctx.save(); // Change fill style to orange ctx.fillStyle = "#FF8C00"; ctx.fillRect(80, 10, 50, 50); // Save the state (orange fill) ctx.save(); // Change fill style to blue ctx.fillStyle = "#0070C0"; ctx.fillRect(150, 10, 50, 50); // Restore to orange fill (the last state saved) ctx.restore(); ctx.fillRect(80, 80, 50, 50); // Restore to black fill (the first state saved) ctx.restore(); ctx.fillRect(10, 80, 50, 50); </script> </body> </html>
