JSFiddle - React, Tailwind, and code Playground

by Gabriel Z

HTML

<div class='divCanvas'></div>

CSS

.divCanvas {
    display:inline;
    position:absolute;
    left:20px;
    top:20px;
  }
  
  .grid .col {
    width:5px;height:5px;
    background-color:black;
    display:inline-block;
    border-radius:1px;
  }

.grid .row {
   display:block;
  margin:0px;padding:0px;
  height:5px;
  
}

JavaScript

function make_grid(x,y,target) {
		// makes a grid to simulate dot matrix display

		var grid = [[],[]]; 
		var tempx, tempy;
		var divcanvas = $(target);
		var gridstr = '<div class="grid">';

		// draw grid
		for(tempy=0;tempy<y; tempy++)
		{
			gridstr += "<div class='row'>";

			for(tempx=0;tempx<x; tempx++)
				gridstr += "<div class='col x"+tempx+" y"+tempy+"'></div>";

			gridstr += "</div>";
		}
		
		gridstr += "</div><!-- .grid -->";
		divcanvas.html(gridstr);
	}   
	   

	function plot_pixel(x,y,target,color)
	{
		var cell = $(target+" .col.x"+x+".y"+y);  
		cell.css("background-color",color);
	}  
	  
	make_grid(32,32,".divCanvas");
	  
	  // plot_pixel(22,19,".divCanvas","yellow"); // test


	  
	function plot_line(x,y,xx,yy, target,color)
	{
		// find the distances travelled
		var dx = xx - x;
		var dy = yy - y;

		// prevent time travel
		if(dx < 0) dx *= -1;
		if(dy < 0) dy *= -1;

		// determine speed of pixel travel...
		var sx=1, sy=1; 
		
		if(dx>dy)		sy = dy/dx;
		else if(dy>dx)	sx = dx/dy;

		// find our one...
		if(sx == sy) // both are one..
		{
			var tx, ty; // temp variables 

			if(x<=xx) // are we going forwards?
				for(tx = x; tx < xx; tx++)
					plot_pixel(tx,tx,target,color);
			else  // .. we are going backwards.
				for(tx = x; tx > xx; tx--)
					plot_pixel(tx,tx,target,color);
		}
		else if(sx > sy) // x is the 1
		{
			ty = y;

			if(x<=xx) // are we going forwards..?
			{
				for(tx = x; tx < xx; tx++)
				{
					plot_pixel(tx, Math.round(ty), target, color);
					ty += sy;
				}   
			} else { // or backwards?
				for(tx = x; tx > xx; tx--)
				{
					plot_pixel(tx, Math.round(ty), target, color);
					ty += sy;
				}   
			}    
		}
		else if(sy > sx) // y is the 1
		{
			console.log('ccc');
			tx = x;

			if(y<=yy) // Forwards?
			{
				for(ty = y; ty < yy; ty++)
				{
					plot_pixel( Math.round(tx), ty, target, color);
					tx += sx;
				}   
			} else { // .. or backwards?
				for(ty = y; ty > yy;...