Javascript - Chart, moving points in pure js

Question

I have this code, now by clicking on chart line I can move clicked point. It can be moved up, down, left, right and this is good but I should be able to move previos 20 points and next 20 points to do

something like this:

but looks like this:

You can also check here https://jsbin.com/qumihizoje/1/edit?html,js,output

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var cw = canvas.width;
var ch = canvas.height;
var mouse = {};
var draggable = false;

context.lineWidth = 2;
context.strokeStyle = "blue";

var coordinates = [];

for (let i = 0; i < 300; i++) {
  coordinates.push({ x: i, y: getRandomInt(80, 85) });
}

function getRandomInt(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min)) + min;
}

canvas.addEventListener("mousedown", function(e) {
  handleMouseDown(e);
});

function handleMouseDown(e) {
  mouse = oMousePos(canvas, e);
  for (index = 0; index < coordinates.length; index++) {
    context.beginPath();
    context.arc( coordinates[index].x, coordinates[index].y, 5, 0, 2 * Math.PI );
    if (context.isPointInPath(mouse.x, mouse.y)) {
      draggable = index + 1;
      break;
    }
  }
}

function drawPolygon() {
  context.clearRect(0, 0, cw, ch);
  context.beginPath();
  context.moveTo(coordinates[0].x, coordinates[0].y);
  for (index = 1; index < coordinates.length; index++) {
    context.lineTo(coordinates[index].x, coordinates[index].y);
  }
  context.stroke();
}

canvas.addEventListener("mousemove", function(e) {
  if (draggable) {
    mouse = oMousePos(canvas, e);
    coordinates[draggable - 1].x = mouse.x;
    coordinates[draggable - 1].y = mouse.y;
    drawPolygon();
  }
});

canvas.addEventListener("mouseup", function(e) {
  if (draggable) {
    draggable = false;
  }
});

function oMousePos(canvas, evt) {
  var ClientRect = canvas.getBoundingClientRect();
  return {
    x: Math.round(evt.clientX - ClientRect.left),
    y: Math.round(evt.clientY - ClientRect.top)
  };
}

drawPolygon();

<canvas id="canvas"></canvas>

I'm moving only one point, how to fix it? I need to use pure js.

Answer 1

This is not exactly what you are looking for but should get you closer...
I'm using a rolling average to move the previous 20 points and next 20 points.
You can use other strategies to move those points and get different type of curves, but since you have not tried anything this gives you a general idea of what is possible.

Result should look like:

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var cw = canvas.width;
var ch = canvas.height;
var mouse = {};
var draggable = false;

context.lineWidth = 2;
context.strokeStyle = "blue";

canvas.addEventListener("mousemove", function(e) {
  if (draggable) {
    mouse = oMousePos(canvas, e);
    coordinates[draggable - 1].y = mouse.y;
    var max = Math.min(draggable + 20, coordinates.length)
    var min = Math.max(draggable - 20, 0)
    
    var ra = []
    ra.push(mouse.y)
    for (index = draggable; index < max; index++) {
      if (ra.length > 20) ra.shift()
      ra.push(clone[index].y)
      coordinates[index].y = ra.reduce((a, b) => a + b, 0)/ra.length
    }
    
    ra = []
    ra.push(mouse.y)
    for (index = (draggable-2); index > min; index--) {
      if (ra.length > 20) ra.shift()
      ra.push(clone[index].y)
      coordinates[index].y = ra.reduce((a, b) => a + b, 0)/ra.length
    }
    drawPolygon();
  }
});

canvas.addEventListener("mousedown", function(e) {
  handleMouseDown(e);
});

canvas.addEventListener("mouseup", function(e) {
  if (draggable) {
    draggable = false;
  }
});

var coordinates = [];

for (let i = 0; i < 300; i++) {
  coordinates.push({ x: i, y: getRandomInt(80, 85) });
}
var clone = coordinates.map((i) => ({ x: i.x, y: i.y }))

function getRandomInt(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min)) + min;
}

function handleMouseDown(e) {
  mouse = oMousePos(canvas, e);
  for (index = 0; index < coordinates.length; index++) {
    context.beginPath();
    context.arc( coordinates[index].x, coordinates[index].y, 5, 0, 2 * Math.PI );
    if (context.isPointInPath(mouse.x, mouse.y)) {
      draggable = index + 1;
      break;
    }
  }
}

function drawPolygon() {
  context.clearRect(0, 0, cw, ch);
  context.beginPath();
  context.moveTo(coordinates[0].x, coordinates[0].y);
  for (index = 1; index < coordinates.length; index++) {
    context.lineTo(coordinates[index].x, coordinates[index].y);
  }
  context.stroke();
}

function oMousePos(canvas, evt) {
  var ClientRect = canvas.getBoundingClientRect();
  return {
    x: Math.round(evt.clientX - ClientRect.left),
    y: Math.round(evt.clientY - ClientRect.top)
  };
}

drawPolygon();

<canvas id="canvas"></canvas>