title: How do you draw d3-contour multipolygon output to canvas?
body: <p>I am trying to create a d3-contour map using solar radiation as a google maps overlay using canvas not svg. I am new to d3 and am developing my js knowledge, I'm struggling to find complete examples on the interwebs to work from.</p>
  
  <p><strong>As an initial step I have made some dummy data for a 7 x 7 grid with made up values (10-40) which I want to display on a html page without google maps.</strong></p>
  
  <p>I use d3-contour which creates MultiPolygons. I am trying to draw these to a canvas element. With my code, nothing appears in html however no errors are in the console. Here is my code...</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;script src="https://d3js.org/d3.v4.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://d3js.org/d3-hsv.v0.1.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://d3js.org/d3-contour.v1.min.js"&gt;&lt;/script&gt;
      &lt;title&gt;Untitled Document&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;canvas id="canvas" width="1000" height="1000"&gt;&lt;/canvas&gt;
      &lt;script&gt;
  
  values  = [10,10,10,10,10,10,10,20,20,20,20,20,20,20,30,30,30,30,30,30,30, 40,40,40,40,40,40,40,30,30,30,30,30,30,30,20,20,20,20,20,20,20,10,10,10,10,10,10,10];
  
  
          var n = 7,
              m = 7,
              canvas = document.querySelector("canvas"),
              context = canvas.getContext("2d"),
              path = d3.geoPath().context(context);
              contours = d3.contours().size([n, m]);
              projection = d3.geoIdentity().scale(canvas.width / n),
              path = d3.geoPath(projection, context);
  
  
          function update(data) {
              context.beginPath();
              path(contours
                   .thresholds(d3.range(0, 50, 10))(data));
              context.stroke();
          }
  
          update(values);
  
        &lt;/script&gt;
  
     &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>