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


Canvas has a method called clip() which allow us to define clipping regions you can read more on 1.5.6 HTML5 Canvas Clipping Region Tutorial . we will define a region using Mcontrols method :

/**
    * Get mask's controls
    *
    * @return array
*/
BasicShape.prototype.Mcontrols = function () {
    var Mcontrols = [];
    Mcontrols[0]  = {x : this.x + this.padding[3] , y : this.y + this.padding[0] };
    Mcontrols[1]  = {x : this.x + this.width - this.padding[1] , y : this.y + this.padding[0] };
    Mcontrols[2]  = {x : this.x + this.width - this.padding[1] , y : this.y + this.height - this.padding[2]};
    Mcontrols[3]  = {x : this.x + this.padding[3] , y : this.y + this.height - this.padding[2]};
    return Mcontrols;
};

So the draw function become :

BasicShape.prototype.Draw = function () {
    ....
    // Clipping region
    this.context.save();
    this.context.beginPath();
    this.context.rect(Mcontrols[0].x, Mcontrols[0].y, Mcontrols[1].x - Mcontrols[0].x, Mcontrols[3].y - Mcontrols[0].y);
    this.context.closePath();
    this.context.clip();
    // Drawing Text
    this.context.font         = this.font.size+'px '+this.font.family;
    this.context.fillStyle    = this.font.color;
    this.context.textBaseline = 'middle';
    this.context.fillText(this.value, Mcontrols[0].x , Mcontrols[0].y + this.height / 2);
    this.context.restore();
};

That was quick , next time we will work on FormCanvas a form that contain different inputs and .