<svg style="display: block; width: 0; height: 0"> | |
<defs> | |
<filter id="color-matrix"> | |
<fecolormatrix type="matrix" in="SourceGraphic" values="0 0 0 0 0 | |
0 0 0 0 1 | |
0 0 0 0 0 | |
0 0 0 0 1"></fecolormatrix> | |
</filter> | |
</defs> | |
</svg> | |
<canvas id="canvas" width="100" height="100"></canvas> | |
<script> | |
var canvas = document.getElementById('canvas'); | |
var ctx = canvas.getContext('2d'); | |
ctx.filter = 'url(#color-matrix)'; | |
ctx.fillStyle = '#fff'; | |
ctx.fillRect(25, 25, 50, 50); | |
</script> |