| <!DOCTYPE html> | |
| <script> | |
| window.onload = function () { | |
| var ctx = document.getElementById('c').getContext('2d'); | |
| ctx.fillStyle = 'green'; | |
| ctx.fillRect(0, 0, 100, 100); | |
| ctx.fillStyle = 'blue'; | |
| ctx.fillRect(10, 10, 80, 80); | |
| ctx.fillStyle = 'red'; | |
| ctx.fillRect(20, 20, 60, 60); | |
| } | |
| </script> | |
| <p>The canvas below should contain green, blue and red nested squares, all centered with respect to each other.</p> | |
| <canvas id="c" width="100" height="100"></canvas> |