I've been trying to draw on the Canvas using OpenLayers (v6.1.1) but unfortunately, I'm struggling with the Canvas implementation.

I've tried this simple approach:

const extent = [0, 0, 1024, 968];

const projection = new ol.proj.Projection({
  code: 'pixel-projection',
  units: 'pixels',
  extent: extent,
});

let canvas = document.createElement('canvas');

canvas.width = 1024;
canvas.height = 968;
let ctx = canvas.getContext('2d');
ctx.fillStyle = 'green';
ctx.fillRect(0, 0, 100, 100);

const imageLayer = new ol.layer.Image({
  source: new ol.source.ImageCanvas({
    canvas: canvas,
    projection: projection,
    imageExtent: extent,
  }),
});

but I'm getting an undefined error:

Also, here is a fiddle for easier navigation: https://jsfiddle.net/Loque/ur5gw270/4/

Any help would be highly appreciated, thank you.