Linen.js - Text Basics

A few basic samples of using the Linen.js library for text.

by Brian Wendt

HTML

<script src="https://cdn.rawgit.com/BrianWendt/Linen/3203b3d2/linen.js"></script>
<div>
    <h2>Sample 1 - Simple Logo</h2>
    <canvas id="Sample1">This text is displayed if your browser does not support HTML5 Canvas.</canvas>
</div>

<div>
    <h2>Sample 2 - Simple Logo With Color</h2>
    <canvas id="Sample2">This text is displayed if your browser does not support HTML5 Canvas.</canvas>
</div>

<div>
    <h2>Sample 3 - Stoke Logo Only</h2>
    <canvas id="Sample3">This text is displayed if your browser does not support HTML5 Canvas.</canvas>
</div>

<div>
    <h2>Sample 4 - Text Wrap</h2>
    <canvas id="Sample4">This text is displayed if your browser does not support HTML5 Canvas.</canvas>
</div>

<p>Find out more @ <a href="https://github.com/BrianWendt/Linen">github.com/BrianWendt/Linen</a></p>

JavaScript

Linen.dpi = 144;

/* Sample1 - Simple Logo */
var Sample1 = new Linen.Canvas(document.getElementById('Sample1'), 2.5, .75);

Sample1.setBackground('rgb(250,250,250)');

Sample1.addText()
    .setTextAlign('center')
    .setWidth('100%')
    .setY(0.1)
    .setFontSize(40)
    .setText('Linen.js');

Sample1.render();

/* Sample2 - Simple Logo With Color */
var Sample2 = new Linen.Canvas(document.getElementById('Sample2'), 2.5, .75);

Sample2.setBackground('rgb(250,250,250)');

Sample2.addText()
    .setTextAlign('center')
    .setWidth('100%')
    .setY(0.1)
    .setFontSize(40)
    .setFillStyle('rgb(220,0,0)')
    .setText('Linen.js');

Sample2.render();

/* Sample3 - Stoke Logo Only*/
var Sample3 = new Linen.Canvas(document.getElementById('Sample3'), 2.5, .75);

Sample3.setBackground('rgb(250,250,250)');

Sample3.addText()
    .setTextAlign('center')
    .setWidth('100%')
    .setY(0.1)
    .setFontSize(40)
    .setFill(false)
    .setStroke(true)
    .setStrokeStyle('black')
    .setText('Linen.js');

Sample3.render();

/* Sample3 - Text Wrap */
var Sample4 = new Linen.Canvas(document.getElementById('Sample4'), 2.5, 1.4);

Sample4.setBackground('rgb(250,250,250)');

Sample4.addText()
    .setTextAlign('center')
    .setWidth('100%')
    .setY(0.1)
    .setFontSize(11)
    .setText('Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.');

Sample4.render();