| <body> |
| <canvas id="canvas"></canvas> |
| <svg width="0" height="0"> |
| <filter id="emboss"> |
| <feConvolveMatrix |
| kernelMatrix="3 0 0 |
| 0 0 0 |
| 0 0 -3"/> |
| </filter> |
| </svg> |
| </body> |
| <script type="text/javascript"> |
| |
| const canvas = document.getElementById("canvas"); |
| const ctx = canvas.getContext("2d"); |
| |
| function draw() { |
| ctx.fillRect(20, 20, 100, 100); |
| |
| ctx.beginPath(); |
| ctx.arc(150, 70, 50, 0, 2*Math.PI); |
| ctx.fill(); |
| |
| ctx.beginPath(); |
| ctx.moveTo(220, 20); |
| ctx.lineTo(170, 120); |
| ctx.lineTo(270, 120); |
| ctx.lineTo(220, 20); |
| ctx.fill(); |
| } |
| |
| ctx.fillStyle = "rgba(0,255,0,0.5)"; |
| draw(); |
| ctx.fillStyle = "rgba(255,0,255,0.5)"; |
| ctx.filter = "url('#emboss')"; |
| draw(); |
| |
| </script> |
