canvas example

messing with canvas

HTML

<canvas id="canvas" width="500" height="500">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>

CSS

canvas {
    border: 1px dotted black;
}

JavaScript

const iterationAmount = 10000000;
let iterationCount = iterationAmount;
let result = [];

// проводим iterationAmount экспериментов
while(iterationCount>0){
	const r = Math.floor(Math.random()*100);
  result[r] = (result[r]??0)+1;
	iterationCount--;
}

// нормализуем результаты экспериментов
result = result.map(value=>value/iterationAmount);

// отрисовываем результаты
var my_canvas = document.getElementById('canvas'),
    context = my_canvas.getContext("2d");
    
result.forEach((value, index)=>{
	console.log(index, value);
	context.fillStyle = "orange";
	//context.strokeRect(20,20,30,50);
	context.fillRect(index*5,0,5,value*500*50);

});