Text Decorations

Examples of text decorations.

by rodrigopandini

HTML

<script src="https://raw.github.com/kangax/fabric.js/master/dist/all.js"></script>
<canvas id="c" width="500" height="500"></canvas>

CSS

canvas{
  border-width: 1px;
  border-style: solid;
  border-color: #000;
  margin: 5px; 
}

JavaScript

// canvas
var canvas = new fabric.Canvas('c');

var shadowText1 = new fabric.Text("I'm a text with shadow", {
  textShadow: 'rgba(0,0,0,0.3) 5px 5px 5px',
  top: 100,
  left: 250
});
var shadowText2 = new fabric.Text("And another shadow", {
  fill: '#236a9e',
  textShadow: 'rgba(0,0,0,0.9) 0 0 5px',
  top: 200,
  left: 250
});
var shadowText3 = new fabric.Text("Lorem ipsum dolor sit", {
  fill: '#FF0099',
  textShadow: 'green -5px -5px 3px',
  top: 300,
  left: 250
});

canvas.add(shadowText1);
canvas.add(shadowText2);
canvas.add(shadowText3);
canvas.renderAll();