Canvas Spline Editor

Click on the example window to add points. You can move them by dragging, and remove them pressing supr or backspace.

This block is a Canvas version of the Spline Editor by Mike Bostock. To get all the parts together, I read these two nice tutorials: Working with D3.js and Canvas: When and How by [Irene Ros] and (https://bocoup.com/about/bocouper/irene-ros) and D3 and Canvas in 3 steps by lars verspohl. The first one covers the use of D3 with canvas maintaining the enter/update/remove pattern, and the second, the selection of the elements on the canvas.

I didn't reproduce the mode selection, but it would be really easy to do
The hidden canvas used to select the nodes can be shown by removing the style on the top of the code

<!DOCTYPE html>
<meta charset="utf-8">
<style>
.hiddenCanvas { display: none; }
</style>
<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var width = 960,
    height = 500;

var points = [];

var dragged = null,
    selected = null;

d3.select(window)
    .on("mousemove", mousemove)
    .on("mouseup", mouseup)
    .on("keydown", keydown);

var canvas = d3.select("body").append("canvas")
    .attr("width", width)
    .attr("height", height)
    .on("mousedown", mousedown);

var hiddenCanvas = d3.select("body")
  .append('canvas')
  .classed('hiddenCanvas', true) 
  .attr('width', width) 
  .attr('height', height);

var context = canvas.node().getContext("2d");
var hiddenContext = hiddenCanvas.node().getContext("2d");

var colourToNode = {};

var line = d3.line()
    .curve(d3.curveNatural)
    .context(context);
var line2 = d3.line()
    .curve(d3.curveNatural);

var detachedContainer = document.createElement("custom");
var dataContainer = d3.select(detachedContainer);

function redraw(){
    var circle = dataContainer.selectAll("custom.circle")
        .data(points, function(d) { return d; });

circle.enter().append("custom")
        .classed("circle", true)
        .attr("r", 1e-6)
        .attr("cx", function(d) { return d[0]; })
        .attr("cy", function(d) { return d[1]; })
        .attr("r", 6.5)
        .attr('fillStyleHidden', function(d) { 
            var newColor =  genColor();
            colourToNode[newColor] = this;
            return newColor;
    	});
    
    circle
        .classed("selected", function(d) {return d === selected; })
        .attr("cx", function(d) { return d[0]; })
        .attr("cy", function(d) { return d[1]; });

circle.exit().remove();

if (d3.event) {
        d3.event.preventDefault();
        d3.event.stopPropagation();
    }
}

function drawCanvas(){
    context.clearRect(0,0,canvas.attr("width"),canvas.attr("height"));
    hiddenContext.clearRect(0,0,hiddenCanvas.attr("width"),hiddenCanvas.attr("height"));
    
    context.beginPath();
    context.lineWidth = 1.5;
    context.strokeStyle = "steelblue";
    line(points);
    context.stroke();

}
function mouseup() {
  if (!dragged) return;
  mousemove();
  dragged = null;
}

/*
  var t = d3.timer(function(elapsed) {
        if (elapsed > 1000) t.stop();
        drawCanvas();
    });*/

d3.timer(drawCanvas);

//https://medium.freecodecamp.org/d3-and-canvas-in-3-steps-8505c8b27444
var nextCol = 1;
function genColor(){ 
  
  var ret = [];
  if(nextCol < 16777215){ 
    
    ret.push(nextCol & 0xff); // R 
    ret.push((nextCol & 0xff00) >> 8); // G 
    ret.push((nextCol & 0xff0000) >> 16); // B
    nextCol += 1; 
  
  }
var col = "rgb(" + ret.join(',') + ")";
return col;
}
</script>

https://d3js.org/d3.v4.min.js