I saw an example of "Render geometries to a canvas":

  var canvas = document.getElementById('canvas');
  var vectorContext = ol.render.toContext(canvas.getContext('2d'), {size: [100, 100]});

  var fill = new ol.style.Fill({color: 'blue'});
  var stroke = new ol.style.Stroke({color: 'black'});
  var style = new ol.style.Style({
    fill: fill,
    stroke: stroke,
    image: new ol.style.Circle({
      radius: 10,
      fill: fill,
      stroke: stroke

  vectorContext.drawGeometry(new ol.geom.LineString([[10, 10], [90, 90]]));
  vectorContext.drawGeometry(new ol.geom.Polygon([[[2, 2], [98, 2], [2, 98], [2, 2]]]));
  vectorContext.drawGeometry(new ol.geom.Point([88, 88]));

enter image description here

But what to do with the geometry in the projection EPSG:4326?

1 Answer 1


Canvas uses pixel coordinates and GIS uses projected coordinate system or geographic coordinate system. EPSG:4326 is the second one, so the coordinates are in decimal degrees. On the other hand projected coordinate is two dimensional, so its units are usually meters, more info here. I believe that the foundation of any GIS rendering engine is coping with transforming the GIS coordinates to the pixel based plane. To achieve this, you would have to create or use some projection from WGS84 (for example mercator EPSG:3857, but the most suitable depends on what area you want to display) and then multiply it with some constant, so it would fit in the size of your canvas. Probably easier way would be to create empty OL map with just the one geometry and with disabled interactions and controls. Similar question is here.

  • That's clear. And I saw the question "How can we render an OpenLayers 3 feature to a canvas using a style but not using a map", but I don't understand what projection the code works with. And to clarify the author does not allow me to low reputation on stackoverflow. May 25, 2018 at 12:32
  • As written in the answer: In that sample coordinates are already pixels. That means, that the coordinates used here: new ol.geom.Polygon([[[2, 2], [98, 2], [2, 98], [2, 2]]]) are pixel coordinates of the canvas, which starts from top left. You need to tranfrom geographic coordinates to pixel coordinates (based on resolution) and then use the mentioned code.
    – Catch
    May 25, 2018 at 12:40
  • I meant another code: stackoverflow.com/questions/38752860/… May 25, 2018 at 12:43
  • Ok I dug in a little. In that answer he uses canvas.width (in pixels) and ol.extent.getWidth(extent) /height. ol.Extent is only array of numbers and don't have any information about coordinate system. If you would use geographic coordinates it would work with them like they are carthesian. So it depends on what area you want to diplay, but I would recomend to tranform it to some projection and then use the advised approach - translate, scale, translate (scale is now supported in ol.geom)
    – Catch
    May 25, 2018 at 13:28
  • 1
    Thanks, I did it: stackoverflow.com/a/50561528/9697152 May 28, 2018 at 7:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.