Линии и точки на картинке при помощи JavaScript

let points = []; 
let transform = {}; 
let dragged = null; 
let selected = points[points.length-1]; 
 
let line = d3.line().curve(d3.curveLinear); 
let svg = d3.select("svg"); 
let canvas = svg.append('g'); 
let path = canvas.append("path") 
    .datum(points); 
 
svg.on("mousedown", mousedown) 
    .on("mousemove", mousemove) 
 
d3.select(window) 
    .on("mouseup", mouseup) 
    .on("resize", adjustSize); 
 
window.oncontextmenu = () => false; 
svg.call(createZoom()); 
adjustSize(); 
redraw(); 
 
function toggleElement(selector, isVisible) { 
    return d3.select(selector) 
        .node() 
        .classList 
        .toggle('hidden', isVisible) 
} 
 
function applyTransform() { 
    transform = d3.event.transform; 
    canvas.attr("transform", transform); 
} 
 
function createZoom() { 
    return d3.zoom() 
        .filter(() => d3.event.button === 2) 
        .scaleExtent([1, 1]) 
        .on("zoom", applyTransform); 
} 
 
function adjustSize() { 
    let w = window.innerWidth; 
    let h = window.innerHeight; 
    svg.attr("width", w).attr("height", h) 
        .attr("viewBox", `${-w/2} ${-h/2} ${w} ${h}`); 
} 
 
function redraw() { 
 
    canvas.select("path").attr("d", line); 
 
    var circle = canvas.selectAll("circle.knob") 
        .data(points, d => d); 
 
    circle.exit().remove(); 
 
    let newNodes = circle.enter() 
        .append("circle") 
        .classed('knob', true) 
        .attr("r", 1e-6) 
        .on("mousedown", d => { 
            selected = dragged = d; 
            redraw(); 
        }) 
        .on("dblclick", deletePoint) 
        .transition() 
        .duration(250) 
        .attr("r", 6.5); 
 
    circle.merge(newNodes) 
        .classed("selected", d => d === selected) 
        .attr("cx", d => d[0]) 
        .attr("cy", d => d[1]); 
 
    if (d3.event) { 
        d3.event.preventDefault(); 
        d3.event.stopPropagation(); 
    } 
} 
 
function mousedown() { 
    if (d3.event.button !== 0) 
        return; 
    points.push(selected = dragged =  
                d3.mouse(canvas.node())); 
    redraw(); 
} 
 
function mousemove() { 
    if (!dragged) 
        return; 
    let m = d3.mouse(canvas.node()); 
    dragged[0] = m[0]; 
    dragged[1] = m[1]; 
    redraw(); 
} 
 
function mouseup() { 
    if (!dragged) 
        return; 
    mousemove(); 
    dragged = null; 
} 
 
function deletePoint(d) { 
    if (!selected) 
        return; 
    let i = points.indexOf(selected); 
    points.splice(i, 1); 
    selected = points.length ?  
        points[i > 0 ? i - 1 : 0] : null; 
    redraw(); 
}

body,svg{ 
    position: absolute; 
    margin: 0; 
    width: 100vw; 
    height: 100vh; 
    overflow: hidden; 
} 
path { 
    fill: none; 
    stroke-width: 2.2; 
    stroke: red; 
} 
circle { 
    pointer-events: all; 
    stroke: red; 
    stroke-width: 1.5px; 
    fill: #fff; 
    fill-opacity: .2; 
    cursor: pointer; 
} 
.selected { 
    fill: #ff7f0e; 
    stroke: #ff7f0e; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script> 
<svg></svg>