canvas on top

SVG position must be set for it to stay on top

by christopheviau

HTML

<canvas width="100" height="100"></canvas>
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><rect fill="red" width="100" height="100"></rect></svg>

CSS

canvas{
    position: absolute; 
    left: 0;
}
svg{
    /* position: relative; */ 
    left: 0;
}

JavaScript

var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'green';
ctx.fillRect(0, 0, 50, 50);