| OLD | NEW |
| 1 <html> | 1 <html> |
| 2 <body> | 2 <body> |
| 3 <canvas id="c"></canvas> | 3 <canvas id="c"></canvas> |
| 4 <script> | 4 <script> |
| 5 var canvas = document.getElementById("c"); | 5 var canvas = document.getElementById("c"); |
| 6 canvas.setAttribute("width", "250"); | 6 canvas.setAttribute("width", "250"); |
| 7 canvas.setAttribute("height", "200"); | 7 canvas.setAttribute("height", "200"); |
| 8 var ctx = canvas.getContext("2d"); | 8 var ctx = canvas.getContext("2d"); |
| 9 | 9 |
| 10 ctx.fillStyle = 'green'; | 10 ctx.fillStyle = 'green'; |
| 11 ctx.fillRect(0, 0, 100, 100); | 11 ctx.fillRect(0, 0, 100, 100); |
| 12 ctx.fillRect(120, 0, 150, 150); | 12 |
| 13 ctx.save(); |
| 14 ctx.beginPath(); |
| 15 ctx.rect(120, 0, 150, 150); |
| 16 ctx.clip(); |
| 17 ctx.fillRect(0, 0, 250, 200); |
| 18 ctx.restore(); |
| 19 |
| 13 </script> | 20 </script> |
| 14 <p>Two green squares with no color bleeding should be visible.</p> | 21 <p>Two green squares with no color bleeding should be visible.</p> |
| 15 </body> | 22 </body> |
| 16 </html> | 23 </html> |
| OLD | NEW |