| <style> |
| canvas { |
| width: 700px; |
| height: 400px; |
| } |
| </style> |
| <body> |
| <h3>This tests canvas layers and globalCompositeOperation.</h3> |
| <canvas id="canvas"></canvas> |
| <script> |
| const canvas = document.getElementById('canvas'); |
| const ctx = canvas.getContext('2d'); |
| canvas.width = 700; |
| canvas.height = 400; |
| |
| ctx.globalCompositeOperation = "xor"; |
| ctx.fillStyle = 'green'; |
| ctx.fillRect(20, 20, 200, 200); |
| |
| ctx.fillStyle = 'red'; |
| ctx.fillRect(120, 120, 200, 200); |
| |
| ctx.globalCompositeOperation = "source-over"; |
| ctx.fillRect(220, 220, 200, 200); |
| </script> |
| </body> |
