I want to add a FabricJS canvas on top of a video but I am unable to set the canvas position property to “absolute”.

<div id="videoKit">
  <video id="video" controls preload="metadata">
    <source
      src="https://media.istockphoto.com/id/1760658147/fr/vid%C3%A9o/prise-de-vue-par-drone-de-dauphins-nageant.mp4?s=mp4-640x640-is&k=20&c=y9709pLK1KmLp1FZRzkKd8Pmx4xurbRqAK6RWKLSapc="
      type="video/mp4"/>
  </video>
  <canvas id="canvas"></canvas>
</div>

<script>
  var canvas = new fabric.Canvas('canvas', {
    width: 500,
    height: 500
  });

  var canvasNode = canvas.getElement();

  canvasNode.style.position = 'absolute';
  canvasNode.style.left = '0px';
  canvasNode.style.top = '0px';
  canvasNode.style.border = '2px solid #000';
</script>

I tried to change the CSS property of the initial canvas, upper canvas and lower-canvas as well as the canvas-container of the FabricJS set-up.
But that did not work.

Could you help me ?

Please find my last attempt here : JSFiddle

Thanks!