Openlayers 3: How To Draw Sth Using Canvas.getContext('2d') On Top Of The Map

I want to draw some geometry in the map using canvas.getContext('2d'). However, the geometry I've drawn just show for a while. It disappear when I pan/zoom the map. How can I draw

Solution 1:

You can do that with an ol.source.ImageCanvas and its canvasFunction.

jsFiddle: https://jsfiddle.net/45oxL7rf/

var map = new ol.Map({
  layers: [
    new ol.layer.Tile({
      title: 'basemap',
      source: new ol.source.Stamen({ layer: 'toner' })
    }),
    new ol.layer.Image({
      source: new ol.source.ImageCanvas({
        canvasFunction: function (extent, resolution, pixelRatio, size, projection) {
          var canvas = document.createElement('canvas');
          canvas.width = size[0];
          canvas.height = size[1];

          var context = canvas.getContext('2d');
          // begin custom shape
          context.beginPath();
          context.moveTo(170, 80);
          context.bezierCurveTo(130, 100, 130, 150, 230, 150);
          context.bezierCurveTo(250, 180, 320, 180, 340, 150);
          context.bezierCurveTo(420, 150, 420, 120, 390, 100);
          context.bezierCurveTo(430, 40, 370, 30, 340, 50);
          context.bezierCurveTo(320, 5, 250, 20, 250, 50);
          context.bezierCurveTo(200, 5, 150, 20, 170, 80);

          // complete custom shape
          context.closePath();
          context.lineWidth = 5;
          context.fillStyle = '#8ED6FF';
          context.fill();
          context.strokeStyle = 'blue';
          context.stroke();

          return canvas;
        },
        projection: 'EPSG:3857'
      })
    })
  ],
  target: 'map',
  view: new ol.View({
    center: ol.proj.fromLonLat([-97, 38]),
    zoom: 4
  })
});

Note that I just copy/pasted your canvas drawing and left it as is. As you pan the map, your graphic will not be anchored to the map as you might expect, since you're drawing to static pixel coordinates. In your real app, you'll likely be calculating the proper pixel coordinates based on the arguments passed into your canvasFunction.