He estado tratando de dibujar en Canvas usando OpenLayers (v6.1.1) pero, desafortunadamente, tengo problemas con la implementación de Canvas.

He intentado este enfoque simple:

 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, }), });

pero estoy recibiendo un error indefinido:

Además, aquí hay un violín para facilitar la navegación: https://jsfiddle.net/Loque/ur5gw270/4/

Cualquier ayuda sería muy apreciada, gracias.