使用带有静态图像的 OpenLayers Canvas 源

Question

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.

Answer 1

ImageCanvas needs a canvasFunction option:

  source: new ol.source.ImageCanvas({
    canvasFunction: function() {
      return canvas;
    },
    projection: projection,
    imageExtent: extent,
    ratio: 1,
  }),

ImageStatic needs a url option:

  source: new ol.source.ImageStatic({
    url: canvas.toDataURL(),
    projection: projection,
    imageExtent: extent,
  }),