JSFiddle - React, Tailwind, and code Playground

by John Doe

HTML

<p id="log">just some logging information</p>
<canvas width="500" height="500" id="canvas">Sorry, no canvas available</canvas>

CSS

body {
	background-color:#755;
	padding:0;
	margin:0;
	overflow:scroll;
  font-family:sans-serif;
  color:#fff;
}
canvas {
  border:1px solid #000;
  float:left;
  clear:both;
}

JavaScript

/*
 * TODO: 
 */

let cnvs = document.getElementById('canvas'),
  ctx = cnvs.getContext('2d')
  
let abs_unit = 400
let abs_left = 50
let abs_right = abs_left+abs_unit
let top1 = 50
let top2 = 100
let tick = 20
let base = 2


function main()
{ 
	clog("main")
  eraseCanvas()
  ctx.fillStyle = '#000'
  ctx.font = "8px Georgia";
  //*
  ctx.beginPath()
  ctx.lineWidth = 1
  ctx.strokeStyle = '#000'
  
  for(i=0;i<=base;i++)
  {
    let x = abs_left+i*abs_unit/base
    ctx.fillText((i<base)?"0."+i:"1", x, top1 - 0.5*tick);
  	ctx.moveTo(x, top1)
    ctx.lineTo(x, top1+tick)
  }
  ctx.stroke()
  ctx.closePath()
  //*/
  drawLogScale()
  
  clog("end main")
  
}

function drawLogScale()
{
	let max_exponent = 5
  ctx.beginPath()
  ctx.lineWidth = 1
  ctx.strokeStyle = '#000'
  let mylog = x => Math.log(x)/Math.log(base)
  
  for(i=0; i< base**max_exponent; i++)
  {
    let x = abs_left + abs_unit * (mylog(i) % 1)
    let intpart = Math.floor(mylog(i))
    let reduction = Math.floor(intpart)/max_exponent * tick
    if(i % base > 0)
    {
    	ctx.fillText(i.toString(base), x, top2 - 0.5*tick  + reduction);
  		ctx.moveTo(x, top2 +reduction)
    	ctx.lineTo(x, top2+tick)
    }
  }
  ctx.stroke()
  ctx.closePath()
}




function eraseCanvas()
{
  ctx.fillStyle = '#fff'
  ctx.fillRect(0, 0, cnvs.width, cnvs.height)
}




function clog(test)
{
	console.log(test)
}

function assert(test, message)
{
	if(!test){
  	clog("ASSERTION FAILED: " + message)
  }
}



function log(text)
{
  document.getElementById('log').innerHTML = text
}

function getMousePos(canvas, evt)
{
  let rect = canvas.getBoundingClientRect()
  return {
    x: evt.clientX - rect.left,
    y: evt.clientY - rect.top
  };
}

/* EVENT LISTENERS */


cnvs.addEventListener('mousemove', function(evt)
{
  let mousePos = getMousePos(cnvs, evt)
  let message = 'Mouse position: ' + mousePos.x + ',' + mousePos.y
  log(message)
  
}, false);

cnvs.addEventListener('click', function(evt)
{
  let mousePos =...