javascript - 下図のように HTML5 Canvas を短時間で描画することはできますか?

Question

電場の混合図を描きたいのですが、以下のコードはGoogle Chromeブラウザで4秒かかります。

この図を友人の物理の先生の授業で使いたいのですが、彼の学校のコンピューター室にはIE8 マシンしかありません。

ポイントチャージは学生に自由につけてフィギュアを見てもらいたい。

下の図を短時間で描くことはできますか？

canvas = $('canvas')[0]
context = canvas.getContext "2d"
height = canvas.height
width = canvas.width

imagedata = context.createImageData 1, 1
imagedata.width = 1
imagedata.height = 1
imagedata.data[0] = 0
imagedata.data[1] = 0
imagedata.data[2] = 0
imagedata.data[3] = 256

for w in [0...width]
  for h in [0...height]
    C = 150
    r1 = Math.sqrt(Math.pow(200 - w, 2) + Math.pow(240 - h, 2))
    v1 = C / r1 # * Math.pow 1.001, -r
    r2 = Math.sqrt(Math.pow(500 - w, 2) + Math.pow(240 - h, 2))
    v2 = C / 2 / r2 # * Math.pow 1.001, -r
    v = v1 + v2
    if 5 < v and v < 6
      context.putImageData imagedata, w, h
    else if 3 < v and v < 4
      context.putImageData imagedata, w, h
    else if 1 < v and v < 2
      context.putImageData imagedata, w, h