| <!doctype html> |
| <style>* { margin: 0; padding: 0; }</style> |
| <canvas id="canvas" width="200" height="200"></canvas> |
| <script> |
| var canvas = document.getElementById('canvas'); |
| var ctx = canvas.getContext('2d'); |
| var width = canvas.width; |
| var height = canvas.height; |
| |
| ctx.globalCompositeOperation = 'lighter'; |
| ctx.fillStyle = '#f00'; |
| ctx.fillRect(0,0,width,height); |
| |
| gradient = ctx.createLinearGradient(0, 0, 0, height); |
| gradient.addColorStop(0, "#0f0"); |
| gradient.addColorStop(1, "#00f"); |
| ctx.fillStyle = gradient; |
| ctx.fillRect(0, 0, width, height); |
| </script> |
