JSFiddle - React, Tailwind, and code Playground

HTML

<input id='iw' value='400'><input id='ih' value='300'> - Ширина/Высота<br>
<input id='ix1' value='150'><input id='iy1' value='100'> - Точка 1 (x,y)<br>
<input id='ix2' value='250'><input id='iy2' value='200'> - Точка 2 (x,y)<br>
<input id='il1' value='10'> - Длина волны от точки 1<br>
<input id='il2' value='10'> - Длина волны от точки 2<br>
<canvas id='cv'></canvas><br>
Кликай на холст для пересчета.

JavaScript

var ct=cv.getContext('2d');
init();
cv.onclick=init;

function init() {
  cv.width=+iw.value;
  cv.height=+ih.value;
  img=ct.getImageData(0, 0, cv.width, cv.height);
  interf();
}

function interf() {
  var x1=+ix1.value;
  var y1=+iy1.value;
  var x2=+ix2.value;
  var y2=+iy2.value;
  var l1=+il1.value;
  var l2=+il2.value;
  var w=cv.width;
  var h=cv.height;
  for (var i=0, len=img.data.length; i<len; i+=4) {
    var y=(i/4/w|0)+1;
    var x=i/4+1-(y-1)*w;
    var diag1=Math.sqrt(Math.pow(x1-x, 2)+Math.pow(y1-y, 2));
    var diag2=Math.sqrt(Math.pow(x2-x, 2)+Math.pow(y2-y, 2));
    var a=2*Math.PI*diag1/l1;
    var b=2*Math.PI*diag2/l2;
    var col=(255*(Math.sin(a)+Math.sin(b)+2)/4)|0;
    img.data[i]=col;
    img.data[i+1]=col;
    img.data[i+2]=col;
    img.data[i+3]=255;
  }
  ct.putImageData(img, 0, 0);
}