D3 Examples - DOM to Canvas using d3

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>
​
<body>
  <script>
    var width = 960, height = 500, blips = 50, maxLength = 200;
    var sketch = d3.select("body").append("custom:sketch")
      .attr("width", width)
      .attr("height", height)
      .call(custom);
    
    d3.select(window).on("mousemove", function() {
        sketch.append("custom:square")
          .attr("x", d3.event.clientX)
          .attr("y", d3.event.clientY)
          .attr("length", 50)
          .attr("strokeStyle", "red")
        .transition()
          .duration(2000)
          .ease(Math.sqrt)
          .attr("length", maxLength)
          .attr("strokeStyle", "white")
          .remove();
    });
    
    function custom(selection) {
      selection.each(function() {
        var customSketch = this;
        var canvas = d3.select("body")
          .append("canvas")
        .node();
        var ctx = canvas.getContext("2d");
        
        d3.timer(redraw);
        
        function redraw() {
          canvas.width = customSketch.getAttribute("width");
          canvas.height = customSketch.getAttribute("height");
          for (var child = customSketch.firstChild; child; child = child.nextSibling) {
            draw(child);
          }
        }
        function draw(element) {
          switch(element.tagName) {
            // for some reason, tagName returns Uppercase ¯\(°_o)/¯
            case "SQUARE": {
              var x = +element.getAttribute("x");
              var y = +element.getAttribute("y");
              var length = element.getAttribute("length");
              ctx.strokeStyle = element.getAttribute("strokeStyle");
              ctx.lineWidth = 0.1;
              ctx.rect((x - length / 2), (y - length / 2), length, length);
              ctx.stroke();
//               ctx.rotate(0)
              break;
            }         
          }
        }
      });
    }
    
  </script>
</body>
​
    