How to draw an inner buffer or inner stroke on a polygon using OpenLayers 4

Question

I would like to recreate the same style that OSM uses when editing polygons. I call this the "inner stroke" or the "inner buffer".

OSM example:

I know that I can use an array ol.style.Style, with one send back geometryfor the internal buffer. However, to create new geometries, it seems that really resource-intensive simply represent the original geometry with a buffer. Is this the recommended way? Can I use in ol.style.Strokesome advanced way?

---

An additional feature is that the pixel width of the inner stroke screen is a constant value, regardless of the zoom level. For example, here the polygon is reduced to:

Answer 1

This is similar to what I used in my project. I got this piece of code from http://openlayers.org/en/latest/apidoc/ol.style.html If you want a thicker border, you can increase the width in the measure.

var fill = new ol.style.Fill({
    color: 'rgba(255,255,255,0.4)'
});
var stroke = new ol.style.Stroke({
    color: '#3399CC',
    width: 1.25
});
var style = new ol.style.Style({
    fill: fill,
    stroke: stroke
});