JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://jdan.github.io/isomer/js/isomer.min.js"></script>
<canvas id='canvas' width='300' height='300'></canvas>

CSS

#canvas{
    width: 300px;
    height: 400px;
    border: 1px solid black;
}

JavaScript

/*var Shape = Isomer.Shape;
var Path = Isomer.Path;
var Color = Isomer.Color;
var Point = Isomer.Point;
*/


window.onload = function(){
    drawPackConfig.init(1,1,1)
};


var drawPackConfig = { 
	
	
	
	init: function(l,w,h) {
		
		this.l = l
		this.w = w
		this.h = h
		
		this.NoL = 5	
		this.NoW = 1
		this.NoLys = 2

		this.Color = Isomer.Color;
		this.red = new Color(160, 60, 50);
		this.blue = new Color(50, 60, 160);
		this.rsc = new Color(217, 155, 74);
		this.Shape = Isomer.Shape;
		this.Point = Isomer.Point;		
		this.iso = new Isomer(document.getElementById("canvas"));
		this.cube = this.Shape.Prism(this.Point.ORIGIN);
		
		this.configDraw()
	},
		
		configDraw: function() {
		// clear the canvas
			this.clearCanvass()
		// determine the draw direction on the grid
			if(this.NoL>this.NoW){
				this.x_lys()
			}
			else if(this.NoL<this.NoW){			
				this.y_row()
			}
			else {
				this.x_row()
			}	
	},
	
	x_row: function(ly) {
		for(i=0;i<this.NoL;i++){
				this.iso.add(this.cube.translate(((this.NoL-(i+1))+((this.NoL-i)/10)), 0, 0), this.rsc);
				this.iso.add(this.cube.translate(((this.NoL-(i+1))+((this.NoL-i)/10)), 0,(ly+(this.NoL/10))), this.rsc);
		}
		return
	},
	
	y_row: function() {
		x=5
		for(i=0;i<x;i++){
				this.iso.add(this.cube.translate(0,((x-(i+1))+((x-i)/10)), 0), this.rsc);
		}
		return
	},
	
	x_lys: function() {

		for(ly=0;ly<this.NoLys;ly++){
		this.x_row(ly)
		}
	},
	
	clearCanvass: function(){
		canvas = document.getElementById("canvas");
		ctx = canvas.getContext("2d");
		ctx.clearRect(0, 0, canvas.width, canvas.height);
		return
	}