icanvas v1.0.1

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.