Day 2 : InputCanvas 2.0

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

Hi , Last time I wrote the BasicShape object , today I think that I should add some proprieties : value & font in order to add text to shapes. Also a font's setter method :

/**
   * Set font proprieties.
   *
   * @param int size       : Size of border in pixel.
   * @param string color  : Color of border (Hex).
   * @param string family : Font family.
   * @return void
*/
BasicShape.prototype.Font = function (size, color, family) {
   this.font.size   = size   || 14;
   this.font.color  = color  || '#000000';
   this.font.family = family || 'Arial';
};

The next big thing is how to draw text on a shape while respecting border , border-radius , and padding ?!!

Day 1 : InputCanvas 2.0

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

Today I'll start redesigning InputCanvas , the old version wasn't clear and customisable. There was only 2 objects FormCanvas and InputCanvas , and only text input.
In this new version I'll try to create so match more objects that we can use separately. Also I'm going to use one of the most important feature in OOP which is inheritance , the most important object is BasicShape it's the parent object of all types of inputs with basic proprieties and methods.

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 :