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="800" height="600"></canvas>

CSS

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

JavaScript

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

var underlineText = new fabric.Text("I'm underlined text", {
  textDecoration: 'underline',
  fill: '#000000',
  top: 30,
  left: 400
});

var lineThroughText = new fabric.Text("I'm line-through text", {
  textDecoration: 'line-through',
  fill: '#0000FF',
  top: 110,
  left: 400
});

var overlineText = new fabric.Text("I'm overlined text", {
  textDecoration: 'overline',
  fill: '#FF0099',
  top: 190,
  left: 400
});

var underlineOverlineText = new fabric.Text("I'm underlined and overlined text", {
  textDecoration: 'underline overline',
  fill: '#9900FF',
  top: 270,
  left: 400
});

var underlineLineThroughText = new fabric.Text("I'm underlined and line-through text", {
  textDecoration: 'underline line-through',
  fill: '#00FF99',
  top: 350,
  left: 400
});

var lineThroughOverlineText = new fabric.Text("I'm line-through and overlined text", {
  textDecoration: 'line-through overlined',
  fill: '#99FF99',
  top: 430,
  left: 400
});

var underlineLineThroughOverlineText = new fabric.Text("I'm underlined, line-through and overlined text", {
  textDecoration: 'underline line-through overline',
  fill: '#0099FF',
  top: 510,
  left: 400
});

canvas.add(underlineText);
canvas.add(lineThroughText);
canvas.add(overlineText);
canvas.add(underlineOverlineText);
canvas.add(underlineLineThroughText);
canvas.add(lineThroughOverlineText);
canvas.add(underlineLineThroughOverlineText);
canvas.renderAll();