Monday, February 6, 2012

InputCanvas 2.0

May Allah`s peace , mercy and blessing be upon you

Hi, I have been developing InputCanvas.js in the open (on, It's the first Javascript Library to create real forms and inputs on the Canvas element . It's not HTML's native inputs and no CSS positioning .

What can I do with InputCanvas?

You can create forms and inputs that work exactly like usual html fields on canvas , with events and style support.

How can I use it ?

Using InputCanvas is really simple . just follow the steps :

1-Include the library in your page :
<script type="text/javascript" src="inputcanvas.js"></script>
2-Create a new instance of the FormCanvas object (a canvas should have one form).
var canvas = document.getElementById('myCanvas');
var form = new FormCanvas(canvas);
3-Add inputs to your form :
var inp = form.addInput(100,100,250,40);
var inp2 = form.addInput(100,200,200,30);
4-Styling :
inp.border.radius = [10,0,20,0];
inp.border.color = '#FF0000';
inp.border.size = 10;
5-Add Event Handlers :
inp.onFocus = function(){inp.border.color = '#DD0125';};

That's the old documentation you can try the Demo of InputCanvas 1.1 on Jsfiddle , now I am working on redesigning the whole library InputCanvas2.0.js is going to be too different , I'll post changes and major differences. Wish me luck !!

No comments:

Post a Comment

Zoli Issam's blog proudly powered by Blogger | All rights reserved Jaw,B 2010-2013