| <!DOCTYPE html> |
| <meta charset="utf-8"> |
| <title>HTML Reference File</title> |
| <p>Pass if square canvas below is a 4 by 4 blue/green checkerboard.</p> |
| <canvas width="400" height="400"></canvas> |
| <script> |
| const canvas = document.querySelector("canvas"); |
| const context = canvas.getContext('2d'); |
| |
| context.fillStyle = 'rgb(0, 255, 0)'; |
| context.fillRect(0, 0, canvas.width, canvas.height); |
| |
| const numColumns = 4; |
| const numRows = 4; |
| context.beginPath(); |
| context.fillStyle = 'rgb(0, 0, 255)'; |
| for (let x = 0; x < numColumns; ++x) { |
| for (let y = 0; y < numRows; ++y) { |
| if (x % 2 == 0 && y % 2 == 0 || x % 2 == 1 && y % 2 == 1) |
| context.rect( |
| x * canvas.width / numColumns, |
| y * canvas.height / numRows, |
| canvas.width / numColumns, |
| canvas.height / numRows |
| ); |
| } |
| } |
| context.fill(); |
| </script> |
