IsoFiddle

Isometric grid

by tcarisland

HTML

<canvas id="isoCanvas" width="450px" height="450px">
  
  
</canvas>

CSS

canvas {
  background-color: #FAFAFA;
  padding: 20px;
  margin: 2em;
  position: absolute;
  left: 10px;
  top: 10px;
}

JavaScript

var box = (function() {
	var x, y, width, height, color, offsetX, offsetY;
  function isoX(xc, yc) {
  	return ((xc - yc) / 2) + offsetX;
  };
  function isoY(xc, yc) {
  	return ((xc + yc) / 4) + offsetY;
  }

  return {
  	renderBY : function(myCanvas) {
      myContext = myCanvas.getContext("2d");  
      myContext.beginPath();
      myContext.moveTo(isoX(x, y + width), isoY(x, y + width));
      myContext.lineTo(isoX(x + width, y + height), isoY(x + width, y + height));
      myContext.lineTo(isoX(x + width, y + height), isoY(x + width, y + height) + height / 2);
      myContext.lineTo(isoX(x, y + width), isoY(x, y + width) + height / 2);
      myContext.fillStyle = "#333";
      myContext.fill();
    },
    renderBX : function(myCanvas) {
      myContext = myCanvas.getContext("2d");
      myContext.beginPath();
      myContext.moveTo(isoX(x + width, y), isoY(x + width, y));
      myContext.lineTo(isoX(x + width, y + height), isoY(x + width, y + height));
      myContext.lineTo(isoX(x + width, y + height), isoY(x + width, y + height) + height / 2);
      myContext.lineTo(isoX(x + width, y), isoY(x + width, y) + height / 2);

      myContext.fillStyle = "#555555";
      myContext.fill();
    },
    render : function(myCanvas) {
      myContext = myCanvas.getContext("2d");  
      myContext.beginPath();
      myContext.moveTo(isoX(x, y), isoY(x, y));
      myContext.lineTo(isoX(x + width, y), isoY(x + width, y));
      myContext.lineTo(isoX(x + width, y + height), isoY(x + width, y + height));
      myContext.lineTo(isoX(x, y + width), isoY(x, y + width));
      myContext.fillStyle = color;
      myContext.fill();
    },
		init : function(xc, yc, w, h, c, canvasWidth, canvasHeight) {
      x = xc;
      y = yc;
      width = w;
      height = h;
      color = c;
      offsetX = canvasWidth / 2;
      offsetY = canvasHeight / 4;
    }
  }
}());

isoCanvas = document.getElementById("isoCanvas");
isoContext = isoCanvas.getContext("2d");
var canvasHeight =...