InputCanvas 2.0

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

Hi, I have been developing InputCanvas.js in the open (on github.com), 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);
form.Init();

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;

Or

inp.Border(10,'#FF0000',[10,0,20,0]);

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 !!