JSFiddle - React, Tailwind, and code Playground

by Konstantin Cryman

HTML

<canvas width='1400' height="1400" id="can" />

JavaScript

let i = 2;

for( n = 0; n < 8; n++ ){

const ctx = document.getElementById('can').getContext( '2d' );



if( i % 10 == 0 ){
    ctx.strokeStyle = '#999999';
} else {
    ctx.strokeStyle = '#00ff00';
}

if( i % 100 == 0 ){
    ctx.strokeStyle = '#0000ff';
}

const sqrt_i = Math.sqrt( i )
const sqrt2i = sqrt_i * Math.SQRT2;
const x_sqrt2i = i + sqrt2i;

ctx.strokeRect( i, sqrt_i, 1, 1 );


if( i % 10 == 0 ){
    ctx.strokeStyle = '#999999';
	ctx.moveTo( n * 20, sqrt_i )
    ctx.lineTo( x_sqrt2i, 0 )
    ctx.stroke()
    ctx.strokeStyle = '#9999ff';
	ctx.moveTo( i, sqrt_i )
    ctx.lineTo( i, sqrt_i + ( i / sqrt_i ) )
    ctx.stroke()
}


i *= i
//ctx.strokeRect( i, Math.tan( i ), 1, 1 );

}