I want to create a polygon and have it filled with strokes as in the image :

enter image description here

Currently my style function looks like this :

var tempObjectsStyleFunction = function(feature, resolution) {
return [
    new ol.style.Style({
        fill: new ol.style.Fill({
            color: feature.get('color')
        stroke: new ol.style.Stroke({
            color: feature.get('color'),
            width: 5
        image: new ol.style.Circle({
            radius: 20,
            fill: new ol.style.Fill({
                color: feature.get('color')


What do I need to modify in order to support strokes in the fill ?


There is an example on the Openlayers examples website: https://openlayers.org/en/latest/examples/canvas-gradient-pattern.html

Basically, you have to create a CanvasPattern in a HTMLCanvasElement to fill with an OpenLayers 3 ol.style.Fill style. Checkout the issue for more info. Also, checkout this fiddle with an example that's a lot more like your image


The ol.style.Fill accepts a color property of the type of CanvasRenderingContext2D.fillStyle. This can be used to style your polygons with an image pattern (e.g. like in QGIS / ArcGIS). Currently I don't know a way to programmatically create these strokes so you need to provide an image with them.

After that you can use the following code:

  var layer = new ol.layer.Vector({
    source: source

  var cnv = document.createElement('canvas');
  var ctx = cnv.getContext('2d');
  var img = new Image();
  img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png'; // your image here
  img.onload = function() {
  var pattern = ctx.createPattern(img, 'repeat');

    layer.setStyle(new ol.style.Style({
       fill: new ol.style.Fill({
         color: pattern

See this example of a fully working version: jsfiddle

  • Thank you , but how do I use different colors ? Each polygon has attribute if its blue , red , green etc....
    – Alophind
    Nov 20 '16 at 8:43

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.