[obelisk.js] demo - SideX & SideY

HTML

<script src="http://nosir.github.io/obelisk.js/dist/obelisk.min.1.0.2.js"></script>
<canvas id="canvas-demo" width="1500" height="400"></canvas>

CSS

#canvas-demo {
    background-color: #F4F4F4;
}

JavaScript

// get DOM or jQuery element
// like: $('#canvas-demo')
var canvas = document.getElementById('canvas-demo');

// create pixel view container in point
var point = new obelisk.Point(200, 150);
var pixelView = new obelisk.PixelView(canvas, point);

// create brick
console.log(obelisk);
var colorX = new obelisk.SlopeColor().getByInnerColor(obelisk.ColorPattern.PINK);
var colorY = new obelisk.SideColor().getByInnerColor(obelisk.ColorPattern.GRASS_GREEN);
//var dimensionX = new obelisk.SlopeDimension(200);
var dimensionY = new obelisk.SideYDimension(100, 100);
//var sideX = new obelisk.SlopeSouth(dimensionX, colorX);
var sideY = new obelisk.SideY(dimensionY, colorY);

// render in view
pixelView.renderObject(sideY);