Isomer.js allows you to draw isometric graphics with ease.
  var Shape = Isomer.Shape;
var Point = Isomer.Point;

iso.add(Shape.Prism(new Point(0, 0, 0)));

The above example will show you just how easy it is to declare isometric shapes.

Getting Started

To start using Isomer, you first need to include a small (7kb minified) script wherever you see fit:
  <script src="/path/to/isomer.min.js"></script>

Than you'll have to place a canvas on your document:

  <canvas width="800" height="600" id="art"></canvas>

Now we can finally initiate a isomer object:

  var iso = new Isomer(document.getElementById("art"));

The Grid

In the example below, you can see the grid that isomer.js uses for the placement of isometric shapes.

The blue grid is the x,y plane while the red line is the z-axis.

Putting 2 && 2 Together

By now you've probably realized that the (0,0,0) is the x,y,z coordinates when we are adding the Prism shape to the scene. We can also specify width, length and height of our prism by doing:

  iso.add(Shape.Prism(Point.ORIGIN, 2,1,3));


I know this was a short introduction to Isomer.js but that is about all you need to know to get started! The best way to learn is to jump right into the code and start experimenting yourself. I hope that this helped to get you started. Until next time!

2,479 2 31