R=(s=~new Date,p=[],i=0,j=9)=>{
while(p.push(i)<100)--j?0:j=++i;
return _=>(s=(1+Math.sin(s))*1e5,p[100*(s-~~s)|0])
};
// test
var rnd=R()
t=[0,0,0,0,0,0,0,0,0,0,0,0,0,0];
rgb='000,444,666,888,aaa,ddd,f0f,ff0,0ff,0ff,0f0,00f,f00,fff'.split`,`
.map(v=>(v=parseInt(v,16),[(v&15)*17,(v>>4&15)*17,(v>>8)*17]))
cnt=400*300
//for (i=0;i<cnt;i++)t[rnd()]++;
ctx = C.getContext("2d");
img=ctx.getImageData(0, 0, 400, 300)
for(p=0,y=0;y<300;y++)for(x=0;x<400;x++)
v=rnd(),t[v]++,
img.data[p++]=rgb[v][0],img.data[p++]=rgb[v][1],
img.data[p++]=rgb[v][2],img.data[p++]=255
ctx.putImageData(img, 0, 0)
o=''
for(i=0;i<14;i++)
t[i]/=cnt, o+=`<p><i>${i}</i><b style="width:${t[i]*300}%">,</b>${(t[i]*100).toFixed(2)}%</p>`;
G.innerHTML=o
#G { width: 400px; font-size: 12px; border: 1px solid #000; }
p { margin: 0}
b { display: inline-block; font-size:80%; background: #08c; margin: 2px }
i { display: inline-block; width: 20px; text-align: right; padding: 0 4px }
#C { width: 400px; height: 300px; }
<div id=G></div>
<canvas id=C></canvas>