Edit in JSFiddle

(function() {
  /* get elements */
  let root = document.getElementById("demo");
  let inputNode = root.getElementsByTagName("input")[0];
  let fileNode = root.getElementsByTagName("div")[1];
  let imageCanvasNode = root.getElementsByTagName("canvas")[0];
  let curveCanvasNode = root.getElementsByTagName("canvas")[1];
  let imageContext = imageCanvasNode.getContext("2d");
  let curveContext = curveCanvasNode.getContext("2d");
  let resetNode = root.getElementsByTagName("button")[0];
  let imgData = null;

  // upload image
  inputNode.onchange = function() {
    let file = inputNode.files[0];
    if (file) {
      fileNode.innerHTML = `${file.name}`;
      createImage(URL.createObjectURL(file));
    }
  };

  // create image to canvas
  let createImage = function(url) {
    let img = new Image();
    img.onload = function() {
      imageCanvasNode.width = img.width;
      imageCanvasNode.height = img.height;
      imageContext.drawImage(img, 0, 0);
      imgData = imageContext.getImageData(0, 0, img.width, img.height);
    };
    img.src = url;
  }

  // get color checked (0: red, 1: green, 2: blue)
  let getCheck = function(color) {
    return root.getElementsByTagName("input")[color + 1].checked;
  };

  //main process
  let point = (x, y, c) => {
    return {
      x: x,
      y: y,
      color: c
    }
  };
  let points = [point(0, 0, 0), point(255, 255, 0),
    point(0, 0, 1), point(255, 255, 1),
    point(0, 0, 2), point(255, 255, 2)
  ];

  let distance = function(ax, ay, bx, by) {
    return Math.sqrt(Math.pow(ax - bx, 2) + Math.pow(ay - by, 2));
  };

  // reset
  let reset = function() {
    points = [point(0, 0, 0), point(255, 255, 0),
      point(0, 0, 1), point(255, 255, 1),
      point(0, 0, 2), point(255, 255, 2)
    ];
    if (imgData)
      imageContext.putImageData(imgData, 0, 0);
    draw();
  };

  resetNode.onclick = reset;

  // add point to canvas
  curveCanvasNode.onmousedown = function(e) {
    let x = e.offsetX;
    let y = 255 - e.offsetY;
    points = points.filter(function(p) {
      return !(x == p.x && getCheck(p.color));
    });
    if (getCheck(0)) points.push(point(x, y, 0));
    if (getCheck(1)) points.push(point(x, y, 1));
    if (getCheck(2)) points.push(point(x, y, 2));
    draw();
  };

  // interpolation
  let ps = Array.from({
    length: 3
  }, () => Array.from({
    length: 256
  }));
  let lagrange = function() {
    let n = points.length;
    for (let c = 0; c < 3; c++)
      for (let x = 0; x < 256; x++) {
        ps[c][x] = 0;
        for (let i = 0; i < n; i++) {
          if (points[i].color == c) {
            let l = 1;
            for (let j = 0; j < n; j++) {
              if (points[j].color == c && i != j) {
                l *= (x - points[j].x) / (points[i].x - points[j].x);
              }
            }
            ps[c][x] += (points[i].y * l);
          }
        }
        ps[c][x] = Math.floor(ps[c][x]);
      }
  };

  // draw canvas
  let draw = function() {
    // clear screen
    curveContext.clearRect(0, 0, curveCanvasNode.width, curveCanvasNode.height);

    // draw curve
    lagrange();
    for (let c = 0; c < 3; c++) {
      switch (c) {
        case 0:
          curveContext.strokeStyle = "rgba(255, 0, 0, 1)";
          break;
        case 1:
          curveContext.strokeStyle = "rgba(0, 255, 0, 1)";
          break;
        case 2:
          curveContext.strokeStyle = "rgba(0, 0, 255, 1)";
          break;
      }

      curveContext.beginPath();
      let y = Math.max(0, Math.min(255 - ps[c][0], 255));
      curveContext.moveTo(0, y);
      for (let x = 1; x < 256; x++) {
        y = Math.max(0, Math.min(255 - ps[c][x], 255));
        curveContext.lineTo(x, y, 1, 0, 2 * Math.PI);
      }
      curveContext.stroke();
    }

    // draw points
    points.forEach(function(p) {
      switch (p.color) {
        case 0:
          curveContext.fillStyle = "rgba(255, 0, 0, 1)";
          break;
        case 1:
          curveContext.fillStyle = "rgba(0, 255, 0, 1)";
          break;
        case 2:
          curveContext.fillStyle = "rgba(0, 0, 255, 1)";
          break;
      }
      curveContext.beginPath();
      curveContext.arc(p.x, 255 - p.y, 4, 0, 2 * Math.PI);
      curveContext.fill();
    });

    //change image(use curve)
    if (imgData != null) {
      let newData = imageContext.createImageData(imgData.width, imgData.height);
      for (let i = 0; i < imgData.data.length; i += 4) {
        for (let c = 0; c < 3; c++) {
          let v = ps[c][imgData.data[i + c]];
          newData.data[i + c] = Math.max(0, Math.min(v, 255));
        }
        newData.data[i + 3] = 255;
      }
      imageContext.putImageData(newData, 0, 0);
    }
  };

  draw();
})();
<div id="demo">
  <canvas width="10px" height="10px"></canvas>
  <div>
    <label>
      <input type="file" accept="image/*" />
      <div>select file</div>
    </label>
  </div>
  <br /><br />
  <canvas width="256px" height="256px"></canvas>
  <br />
  <input type="checkbox" checked /> Red
  <input type="checkbox" checked /> Green
  <input type="checkbox" checked /> Blue <br />
  <button>reset color curve</button>
</div>
    body {
      color: #ffffff;
      background: #20262e;
      font-family: monospace, sans-serif;
    }

    #demo {
      padding: 5px;
    }

    #demo canvas {
      border: solid 1px #ffffff;
    }

    #demo>div {
      margin-top: 5px;
    }

    #demo label input {
      color: #ffffff;
      background: #20262e;
      outline: none;
      display: none;
    }

    #demo label div {
      float: left;
      font-weight: bold;
      font-size: 13.3333px;
      text-align: center;
      padding: 1px 6px;
      margin-right: 10px;
      color: #ffffff;
      background: #20262e;
      border: 1px solid #ffffff;
      outline: none;
    }

    #demo label div:hover {
      color: #20262e;
      background: #ffffff;
      border: 1px solid #ffffff;
    }

    #demo button {
      font-weight: bold;
      float: left;
      color: #ffffff;
      background: #20262e;
      border: 1px solid #ffffff;
      outline: none;
      margin-right: 10px;
      margin-top: 3px;
    }

    #demo button:hover {
      color: #20262e;
      background: #ffffff;
      border: 1px solid #ffffff;
    }