FabricJS - Typo

A tool to build new typographies, idea by Fabienne.

by germandost

HTML

<canvas id="c" width="600"height="400"></canvas>

CSS

@import url(http://fonts.googleapis.com/css?family=Candel);

html {
    background-color: rgb(30, 100, 100);
}

JavaScript

var canvas = new fabric.Canvas('c', {
    backgroundColor: 'white'
});

var letter = new fabric.IText('They', {
    left: 50,
    top: 0,
    fontSize: 19,
    hasControls: false,
    fontFamily: 'Candle',
    selectable: false,
    color: 'rgb(60,60,60)'
});
canvas.add(letter);

var basic1 = function (top, left) {
    return new fabric.Rect({
        fill: 'rgb(200, 40, 40)',
        top: top || 65,
        left: left || 200,
        width: 10,
        height: 140,
        lockScalingX: true,
        lockScalingY: true,
        lockUniScaling: true,
        opacity: 0.8
    });
};

var basic2 = function (top, left) {
    return new fabric.Rect({
        fill: 'rgb(40, 40, 220)',
        top: top || 65,
        left: left || 200,
        width: 10,
        height: 100,
        lockScalingX: true,
        lockScalingY: true,
        lockUniScaling: true,
        opacity: 0.8
    });
};

var basic3 = function (top, left) {
    return new fabric.Rect({
        fill: 'rgb(40, 200, 40)',
        top: top || 65,
        left: left || 200,
        width: 10,
        height: 75,
        lockScalingX: true,
        lockScalingY: true,
        lockUniScaling: true,
        opacity: 0.8
    });
};

canvas.add(basic1());
canvas.add(basic1(65, 220));
canvas.add(basic2(65, 240));
canvas.add(basic2(65, 260));
canvas.add(basic3(65, 280));
canvas.add(basic3(65, 300));