How to add CSS properties for text in the Fabric.js

Question

I want to use css property "-webkit-transform" in the fabric.js or fabric.curvedText.js I want to display text on the canvas like : http://trentwalton.com/2011/05/10/fit-to-scale/

-webkit-transform: skewY(-15deg);

this css property is used to display text like in the above link.

I have add this property in the fabric.curvedText.js like other properties are added eg.:spacing, radius etc.

following is the modified code for the adding -webkit-transform this property rest of the code is same as in the fabric.curvedText.js

var stateProperties = fabric.Text.prototype.stateProperties.concat();
    stateProperties.push(
            'radius',
            'spacing',
            'reverse',
            '-webkit-transform'
    );
    var _dimensionAffectingProps = fabric.Text.prototype._dimensionAffectingProps;
    _dimensionAffectingProps['radius']          = true;
    _dimensionAffectingProps['spacing']         = true;
    _dimensionAffectingProps['reverse']         = true;
    _dimensionAffectingProps['fill']            = true;
    _dimensionAffectingProps['textShadow']          = true;
    _dimensionAffectingProps['-webkit-transform']       = true;

    var delegatedProperties = fabric.Group.prototype.delegatedProperties;
    delegatedProperties['backgroundColor']      = true;
    delegatedProperties['textBackgroundColor']  = true;
    delegatedProperties['textDecoration']       = true;
    delegatedProperties['stroke']           = true;
    delegatedProperties['strokeWidth']      = true;
    delegatedProperties['textShadow']       = true;
    delegatedProperties['-webkit-transform']    = true;

    fabric.CurvedText = fabric.util.createClass(fabric.Text, fabric.Collection, /** @lends fabric.CurvedText.prototype */ {
        type: 'curvedText',
        radius: 50,
        spacing: 15,
        reverse: false,
        bulge: false,
        curve:false,
        pintch:false,
        arch:false,
        wedge:false,
        roof:false,
        bridge:false,
        vally:false,
        -webkit-transform:"skewY(-15deg)",

Answer 1

Fabric objects don't exist in the document. They're virtual objects in memory, represented to the world via element, as a 2-dimensional image.

That's why you can't apply CSS transformation to them; they're not elements in the document.

It's like trying to feed a cat that's being shown on TV. The image that you see is just a representation of a cat, so you can't "modify" it with things that you'd use to "modify" regular objects (feed, pet, dress, etc.).

In order to skew Fabric object, you'd need to augment their representation to account for skewing (in fabric.Object.prototype.render method, for example).