Press Enter - Text Object

Example of press enter in a textarea and update the text object with new line.

by rodrigopandini

HTML

<script src="https://raw.github.com/kangax/fabric.js/master/dist/all.js"></script>
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
<script src="http://fancyapps.com/fancybox/source/jquery.fancybox.pack.js?v=2.1.3"></script>
<link rel="stylesheet" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css?v=2.1.3">
<link rel="stylesheet" href="https://raw.github.com/twitter/bootstrap/01572f00bb5671aaab1763b85c9608c10362aef4/docs/assets/css/bootstrap.css">
<script src="https://raw.github.com/twitter/bootstrap/master/docs/assets/js/bootstrap.min.js"></script>
<canvas id="c" width="400" height="400"></canvas>

CSS

@import url('http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css');
@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
    
canvas{
  border-width: 1px;
  border-style: solid;
  border-color: #000;
  margin: 5px; 
}

#myTextArea{
  margin: 5px;
}

JavaScript

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

var underlineText = new fabric.Text("I'm underlined text", {
    textDecoration: 'underline'
});
var strokeThroughText = new fabric.Text("I'm stroke-through text", {
  textDecoration: 'line-through',
  fill: '#0000FF'
});
var overlineText = new fabric.Text("I'm overlined text", {
  textDecoration: 'overline',
  fill: '#FF0099'
});

canvas.add(underlineText);
canvas.add(strokeThroughText);
canvas.add(overlineText);
canvas.renderAll();