title: D3: Overlay Svg and Canvas: geo Projection
body: <p>I am plotting a map of NYC (interactive svg) and need to overlay it with the canvas with thousands of points. Using <a href="http://bl.ocks.org/boeric/aa80b0048b7e39dd71c8fbe958d1b1d4" rel="nofollow noreferrer">this tutorial</a> I was able to achieve almost what I want: there is an overlay and points are visible.</p>
  
  <p>However, despite using the same projection and having canvas within svg and with the same width and height, points are offset from the svg borders by some specific amount:</p>
  
  <p><a href="https://i.stack.imgur.com/Te3hq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Te3hq.png" alt="enter image description here"></a></p>
  
  <p>This offset remains even through resize, and I can't get where is an error.
  Here is the snippet of my code:</p>
  
  <pre><code>var projection = d3.geoMercator()
      .center([-73.98, 40.72])
      .scale(width * 74)
      .translate([(width) / 2, (height) / 2]);
  ...
  
  var svg = d3.select("#svg-container")
  .append("svg")
  .attr("class", "map");
  
  // CANVAS PART
  var foreignObject = svg.append("foreignObject")
      .attr("x", 0)
      .attr("y", 0)
      .attr("width", width)
      .attr("height", height)
      .attr("class", "overlay");
  
  // add embedded body to foreign object
  var foBody = foreignObject.append("xhtml:body")
      .style("margin", "0px")
      .style("padding", "0px")
      .style("background-color", "none")
      .style("width", width + "px")
      .style("height", height + "px");
  
  // add embedded canvas to embedded body
  var canvas = foBody.append("canvas")
      .attr("x", 0)
      .attr("y", 0)
      .attr("width", width)
      .attr("height", height);
  
  var context = canvas.node().getContext("2d");
  
  // Points
  context.clearRect(0, 0, width, height);
  context.globalAlpha = .8;
  userpoints.forEach(function(d, i) {
          var crd = projection([d.lat, d.lon]);
          // console.log(crd, );
          context.beginPath();
          context.rect(crd[0], crd[1], 1, 1);
          context.fillStyle=comm_colors[d.Community];
          context.closePath();
          context.fill();
  </code></pre>
  
  <p>Here is the corresponding part of the resulting DOM:</p>
  
  <pre><code>&lt;svg class="map"&gt;
      &lt;foreignObject x="0" y="0" width="1036.962" height="1010" class="overlay" style="visibility: visible;"&gt;
          &lt;body style="margin: 0px; padding: 0px; width: 1036.96px; height: 1010px;"&gt;
              &lt;canvas x="0" y="0" width="1036.962" height="1010"&gt;&lt;/canvas&gt;
          &lt;/body&gt;
      &lt;/foreignObject&gt;
      &lt;g id="boros"&gt;&lt;/g&gt;
      &lt;g id="cts"&gt;
          &lt;path&gt; ... 
          &lt;/path&gt;
      &lt;/g&gt;
      &lt;defs&gt;
          &lt;pattern id="lzssi" patternUnits="userSpaceOnUse" width="3" height="3"&gt;&lt;rect width="3" height="3" fill="grey"&gt;&lt;/rect&gt;&lt;path d="M 0,3 l 3,-3 M -0.75,0.75 l 1.5,-1.5
  M 2.25,3.75 l 1.5,-1.5" stroke-width="0.5" shape-rendering="auto" stroke="white" stroke-linecap="square"&gt;&lt;/path&gt;
          &lt;/pattern&gt;
      &lt;/defs&gt;
  &lt;/svg&gt;
  </code></pre>