在htmll5画布中缓慢加载所有颜色

Question

i am trying to make a color tools.so I i tried to show the colors in a canvas.But the problem is,it is loading very slowly.here is my code

  var l=0

  var ctx = document.getElementById('color').getContext('2d');
  for (var i=0;i<125;i++){
    for (var j=0;j<124;j++){
        for(var k=0;k<125;k++){
      ctx.fillStyle = 'rgb(' +i*2+ ',' +j*2 + ','+k*2+')';
      l=i+k; 
      ctx.fillRect(l*1,j*1,1,1);
    }
    }   
  }

i have tested it firefox and crome.Both shows the same behaviour.Please help me.thanks in advance.

Answer 1

First of all, your algorithm is basically wrong. You are calculating the colors in a 3d space, (ijk) and maping that on a 2d space (l, j).

Every value for the l variable is calculated several times and only the last one is visible (i=0 k=100 -> l=100 ; 1=1 k=99 > l=100; i=2 k=98 > l=100 ...

You should decide beforehand what colors go where, and have only 2 loops and not 3 (Probably the most usual decision here is going to a hsl space, omitting l and doing the loops on h and s.

The other big improvement would be to set pixels directly and do not use fillrect. Something in the line of:

var imgData=ctx.createImageData (125,125);

accesing pixels

ctx.putImageData(imgData,0,0);

Answer 2

You should have picture already precalculated (as one of the comments suggest) and then only read the position from this picture. From that you could reverse engineer your color in RGB.