iCanvas
iCanvas is wrapper over canvas, Make working with canvas a little bit easier as we all know anyone who has worked with canvas , its quite a low level api its sometimes quite hard to maintain state of canvas, i was facing the same problem when i decided to make a mini game in canvas , so i first created a small library which woukd make working with canvas a breez.
Installation
<script src="iCanvas.js"></script>
or
npm install icanvas
Usage
Basic
// create the iCanvas object
var canvas1 = new iCanvas();
// append to body
canvas1.appendTo(document.body);
// draws function
canvas1.draw(function (ctx, canvas) {
ctx.fillStyle = "#000";
ctx.strokeStyle = "#000";
ctx.fillRect(200,200,200,200);
ctx.arc(100,100,20,0,Math.PI*2,false);
ctx.stroke();
});
Basic chaining
var canvas1 = new iCanvas(); canvas1.appendTo(document.body); canvas1.draw(function (ctx, canvas) { ctx.fillStyle = "#000"; ctx.strokeStyle = "#000"; ctx.fillRect(200,200,200,200); }) .draw(function (ctx, canvas) { ctx.fillStyle = "#000"; ctx.strokeStyle = "#000"; ctx.arc(100,100,20,0,Math.PI*2,false); ctx.stroke(); }).render();
callback handler
var canvas1 = new iCanvas(); canvas1.appendTo(document.body); canvas1.draw(handler1) .draw(handler2) .render(); function handler1 (ctx, canvas) { ctx.fillStyle = "#000"; ctx.strokeStyle = "#000"; ctx.fillRect(200,200,200,200); } function handler2(ctx, canvas) { ctx.fillStyle = "#000"; ctx.strokeStyle = "#000"; ctx.arc(100,100,20,0,Math.PI*2,false); ctx.stroke(); }
Animation or Game loop
var pos = 0; var canvas1 = new iCanvas(); canvas1.appendTo(document.body); canvas1.background("#000").draw(function (ctx, canvas) { ctx.fillStyle = "#fff"; ctx.strokeStyle = "#fff"; pos++; ctx.fillRect(100+pos,100,100,100); }).update();
Methods
var canvas1 = new iCanvas(); canvas1.appendTo(document.body); canvas1.draw(function (ctx, canvas) { ctx.clearRect(0,0,canvas.width,canvas.height) ctx.fillStyle = "#000"; ctx.strokeStyle = "#000"; this.strokeText("Hello",300,100); ctx.stroke(); this.circle(100,100,20); this.line(100,100,400,400); this.rect(500,100,100,100) ctx.stroke(); }).render();
I am still working on the documentation, and fixing any bugs.