CODEWITHSUNDEEP
javascriptcanvasopenlayers
Svinjica
Svinjica

Reputation: 2519

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.

Upvotes: 0

Views: 658

Answers (1)

Mike
Mike

Reputation: 17872

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

Upvotes: 1

Related Questions