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.Text('Left Aligned: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec volutpat metus eget felis tincidunt, et pretium lorem pellentesque', {
    left: 50,
    top: 0,
    fontSize: 15,
    hasControls: false,
    fontFamily: 'Candel',
    selectable: false,
    color: 'rgb(60,60,60)'
});
canvas.add(letter);

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

var basic2 = function (top, left) {
    return new fabric.Rect({
        fill: 'rgb(0, 0, 0)',
        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));