Use a canvas pattern in the vector-layer example

examples/vector-layer.js

@@ -11,6 +11,21 @@ goog.require('ol.style.Style');
 goog.require('ol.style.Text');
 
 
+var createPattern = function() {
+  var canvas = document.createElement('canvas');
+  var context = canvas.getContext('2d');
+  canvas.width = 4;
+  canvas.height = 4;
+
+  context.fillStyle = 'rgba(255,0,0,0.3)';
+  for (var i = 0; i < canvas.width; i++) {
+    context.fillRect(i, i, 1, 1);
+  }
+
+  return context.createPattern(canvas, 'repeat');
+};
+
+
 var style = new ol.style.Style({
   fill: new ol.style.Fill({
     color: 'rgba(255, 255, 255, 0.6)'
@@ -70,7 +85,7 @@ var featureOverlay = new ol.layer.Vector({
           width: 1
         }),
         fill: new ol.style.Fill({
-          color: 'rgba(255,0,0,0.1)'
+          color: createPattern()
         }),
         text: new ol.style.Text({
           font: '12px Calibri,sans-serif',