Press Enter - Text Object

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

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>
<textarea id="myTextArea" class="textarea"></textarea>
<br/>
<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');
canvas.backgroundColor = "#F5F5F5";
canvas.renderAll();

// object
var myTextObject = new fabric.Text('My Text', { 
    left: 100, 
    top: 100,
    width: 100,
    textAlign: "left"
});
myTextObject.hasRotatingPoint = true;
canvas.add(myTextObject);
canvas.renderAll();

// initialize myTextArea with text value
$("#myTextArea").val(myTextObject.text);

// onKeyUp
$("#myTextArea").keyup(function(evt){
    myTextObject.set("text", this.value);
    canvas.renderAll();
});