JSFiddle - React, Tailwind, and code Playground

by Adolfo

HTML

<canvas id="myCanvas" width="480" height="480"></canvas>

CSS

canvas { background: #ddd; }

JavaScript

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var columnas =10;
var margen=30;
var tallaReticula=Math.floor((myCanvas.width-margen-40)/columnas);



function drawReticula(){
  ctx.beginPath();
  for (i=margen+20;i<=myCanvas.width;i+=tallaReticula){
  	//líneas verticales
    ctx.moveTo(i, margen+20);
    ctx.lineTo(i, myCanvas.height-20);
    ctx.strokeStyle="#99a";
    ctx.stroke();
		//líneas horizontales
    ctx.moveTo(margen+20,i);
    ctx.lineTo(myCanvas.height-20,i);
    ctx.strokeStyle="#99a";
    ctx.stroke();
  }
}




function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawReticula();



//requestAnimationFrame(draw);
}






draw();