<svg style="display: block; width: 0; height: 0"> | |
<defs> | |
<filter id="crop" primitiveUnits="objectBoundingBox"> | |
<femerge x="0" y="0" width="50%" height="40%"> | |
<femergenode in="SourceGraphic"></femergenode> | |
</femerge> | |
</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(#crop)'; | |
ctx.fillStyle = '#0f0'; | |
ctx.fillRect(0, 0, 90, 90); | |
</script> |