With the simple and flexible API provided by it, you can easily add isometric pixel element like brick, cube, pyramid onto HTML5 canvas. Obelisk.js strictly follows the pixel neat pattern: lines with 1:2 pixel dot arrangement, leading to an angle of 22.6 degrees.
You should know this is not for vector isometric graphics drawing. In fact it is not using any canvas graphic drawing API at all, instead, it manipulates all the things in pixel level to obtain typical pixel arrangement. Just try it out to pixelate something. Have fun.
Simply include obelisk.js in your project
// create a canvas 2D point for pixel view worldvar point = 200 200;// create view instance to nest everything// canvas could be either DOM or jQuery elementvar pixelView = canvas point;// create cube dimension and color instancevar dimension = 80 100 120;var gray = obeliskColorPatternGRAY;var color = ;// build cube with dimension and color instancevar cube = dimension color true;// render cube primitive into viewpixelView;
Also you can use it in your Node.js canvas project
canvasdependency can be tricky to install (binary dependency on Cairo) we are not adding it as a project dependency. You will need to add the
canvasdependency explicitly on your project:
$ npm install canvas
$ npm install obelisk.js
// load Node Canvas dependencyvar Canvas = ;// load obelisk.js module// here we need the Canvas as a module parametervar obelisk = Canvas;// create a Node Canvas instancevar canvas = 600450;// Use obelisk the same way you will use it in the browser ...// Save canvas to a filecanvas;
For more details, check the Node.js Canvas example.
Step by step:
Sample code for building all primitives:
To add more pixel primitives - 4 directions slopes will be the first
See details in the release notes.
Pixel art is a form of digital art, where images are edited and displayed on the pixel level. The isometric projection is commonly seen in games to provide a 3D view without using any real 3D processing.
Obelisk.js is released under the MIT License