Search code examples
javascriptcanvasopenlayers

Use OpenLayers Canvas source with Image static

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:

enter image description here

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

Any help would be highly appreciated, thank you.

Solution

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