D3 Examples - d3.geo.path + canvas + pattern image fill

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js"></script>
<script>
​
var width = 960,
    height = 500;
​
var projection = d3.geo.albers()
    .scale(1000);
​
var canvas = d3.select("body").append("canvas")
    .attr("width", width)
    .attr("height", height);
​
var context = canvas.node().getContext("2d");
​
var path = d3.geo.path()
    .projection(projection)
    .context(context);
​
d3.json("us.json", function(error, us) {
  if (error) { throw error; }
​
  var imageObj = new Image();
  imageObj.onload = function() {
    var pattern = context.createPattern(imageObj, 'repeat');
​
    path(topojson.feature(us, us.objects.counties));
    context.fillStyle = pattern;
    context.fill();
  };
  imageObj.src = 'https://lorempixel.com/output/abstract-q-c-640-480-6.jpg';
});
​
</script>
    