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 |