Skip to content

Instantly share code, notes, and snippets.

@psbolden
Created February 16, 2017 16:41
Show Gist options
  • Save psbolden/e1a2dcd11d1e15843efe0521b057e76e to your computer and use it in GitHub Desktop.
Save psbolden/e1a2dcd11d1e15843efe0521b057e76e to your computer and use it in GitHub Desktop.
fabric.js change text font
Source: http://stackoverflow.com/questions/32395416/fabric-canvas-font-style-change-after-added
HTML
_____
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Select Font:</label>
<select name="FontStyleNumber" id="FontStyleNumber">
<option value="Times New Roman">Times New Roman</option>
<option value="Arial">Arial</option>
<option value="Georgia">Georgia</option>
<option value="Hammersmith One">Hammersmith One</option>
<option value="Pacifico">Pacifico</option>
<option value="Anton">Anton</option>
<option value="Sigmar One">Sigmar One</option>
<option value="Righteous">Righteous</option>
</select>
<div class="textcanvas_warpper">
<canvas id="textCanvas" width="500" height="500" style="border: 1px solid black; margin-left:50px; margin-top:35px; z-index:1;"></canvas>
</div>
JS
_____
$(function() {
var canvas = new fabric.Canvas('textCanvas');
var textObj1 = new fabric.Text('font test', {
left: 100,
top: 100,
fontSize: 30,
fill: "#FF0000" // Set text color to red
});
canvas.add(textObj1);
$('#FontStyleNumber').change(function() {
var mFont = $(this).val();
var tObj = canvas.getActiveObject();
tObj.set({
fontFamily: mFont
});
canvas.renderAll();
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment