How to insert half circle style marker in OpenLayers 3

Question

Is it possible to insert half circle shape like below?

I'd like to use it as a vector point marker.

RegularShape goes close to my intention but it seems to work only for "regular shapes".

I've found also an example using Icon which looks very useful and I can achieve a similar result with polygons. Is there any smarter way?

What about using Point instead of Polygon and masking the other half? Thanks.

Answer 1

Like in the example you found, you can create a canvas and use it as img of an icon style:

var canvas = document.createElement('canvas');
canvas.width = size;
canvas.height = size;
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 4;
var radius = canvas.width / 4;
var startingAngle = Math.PI / 2;
var endingAngle = -Math.PI / 2;
var counterclockwise = false;
context.arc(centerX, centerY, radius, startingAngle,
    endingAngle, counterclockwise);
context.fillStyle = '#bada55';
context.fill();
style = new ol.style.Style({
  image: new ol.style.Icon({
    img: canvas,
    imgSize: [size, size]
  })
});

I created a JSFiddle which shows the above code in action.

The circle creation code is based on an answer from How to draw bottom half of a circle in canvas .