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 = 100000;
let iterationCount = iterationAmount;
let result = [];

// проводим iterationAmount экспериментов
while(iterationCount>0){
	const a = Math.random()*Math.PI*2;
  const d = Math.sqrt( -0.1 * Math.log( Math.random() ) );
  const R = (1 + d*Math.sin(a))/2;
  const r = Math.floor(500*R);
  
  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,0,1,value*500*30);

});