title: How can we render an OpenLayers 3 feature to a canvas using a style but not using a map?
body: <p><strong>QUESTION</strong>: </p>
  
  <p>How can we render a feature to a canvas using a style but not using a map?</p>
  
  <p><strong>BACKGROUND</strong>:</p>
  
  <p>I have a sample which renders a geometry to a canvas honoring the ol3 style but it only runs with the unbuilt version of openlayers (ol-debug.js) and because it makes use of private functions (ol.vec.Mat4).</p>
  
  <p><a href="https://rawgit.com/ca0v/ol3-lab/master/rawgit.html?run=ux/style-to-canvas&amp;debug=1" rel="nofollow">works when using ol-debug.js</a></p>
  
  <p><a href="https://rawgit.com/ca0v/ol3-lab/master/rawgit.html?run=ux/style-to-canvas&amp;debug=0" rel="nofollow">fails when using ol.js</a></p>
  
  <p>One alternative is to create a map, add a vector layer, set the style on the feature, add the feature to the layer and remove all the events/controls from the map so it looks like a canvas.</p>
  
  <p>A second is to use <a href="https://developer.pubref.org/static/apidoc/global/closure/goog/vec/Mat4.html" rel="nofollow">goog.vec.Mat4</a>.</p>
  
  <pre><code>let scale = Math.min(canvas.width / ol.extent.getWidth(extent), canvas.height / ol.extent.getHeight(extent));
  console.log("scale", scale);
  
  let transform = Mat4.makeTransform2D(identity,
      canvas.width / 2, canvas.height / 2, // translate to origin
      scale, -scale, //scale
      0, // rotation
      -center[0], -center[1] // translate back
  );
  console.log("transform", transform);
  
  let renderer = new ol.render.canvas.Immediate(ctx, 1, extent, transform, 1);
  renderer.drawFeature(feature, style);
  </code></pre>
  
  <p>A third is similar to the second in that I take on the responsibility of transforming the geometry into pixel coordinates before using ol.render.toContext, as demonstrated in this <a href="http://openlayers.org/en/latest/examples/render-geometry.html" rel="nofollow">example</a>.</p>
  
  <p>I think that about exhausts it?  Or is there another way?</p>