Draw Text On HTML5 Canvas Using Fabric.js - PartI

How to draw text over an image using HTML5 Canvas with Fabric.js.

 Fabric.js   
 

Posted: November 2, 2018. | By: mustafa

DrawTextonHTML5CanvasUsingFabric-PartI.png, Fabric.js, canvas, Draw Text, HTML5, Fabric.js,

Fabric.js is a javascript library that helps drawing graphic objects on a HTML5 canvas element. In this example we are going to draw text over image in a canvas object using HTML5 canvas with fabric.js.

With Fabric.js we can dynamically add text and manipulate its font, size, alignment, and other properties. With Canvas you can do multiple things, like adding text & add animation to it.

In writing text using HTML5 Canvas, we can use font property and set font style, size, text stroke, and  color.

 

Let's start with simple HTML page having javascript to load image and adding text on it. Let's add some javascript files jquery.min.js and fabric.min.js. 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.3/fabric.min.js" type="text/javascript"></script>

Add the canvas tag in body element of your html.

 

<canvas id="canvas" width="920" height="750"></canvas>

 

We have add onload() to body onload event, which dynamically loads the image from local folder or server path. 

var onload = function () {
 var imgPath = 'image.png';

fabric.Image.fromURL(imgPath, function (oImg) {
 canvas.add(oImg);
 canvas.sendToBack(oImg);
 });
 };

Note here I have added canvas.sendToBack(oImg), this will send the image back and let the font we draw make visible.

Next, we are going to add some text.

var text = new fabric.Text('hello, world.', {
 left: canvas.getWidth() / 2,
 top: canvas.getHeight() / 2 
 });
 canvas.add(text); 

Here is a complete html page with a script to load text and add image. 

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Draw Text on HTML5 Canvas Using Fabric.js - PartI</title>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.3/fabric.min.js" type="text/javascript"></script>

</head>

<body onLoad="onload()">


<div class="container" style="margin-top:20px;">

<div class="col-lg-6"> 
 <div id="divCanvas">
 <canvas id="canvas" width="1000" height="800"></canvas>
 </div>
 </div>

</div>


<script type="text/javascript">

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

var onload = function () {
 var imgPath = 'image.png';

fabric.Image.fromURL(imgPath, function (oImg) {
 canvas.add(oImg);
 canvas.sendToBack(oImg);
 });
 };
 
 var text = new fabric.Text('hello, world.', {
 left: canvas.getWidth() / 2,
 top: canvas.getHeight() / 2 
 });
 canvas.add(text);

</script>
</body>
</html>

Hope you find this article helpful, then please make a share.

 


related posts

Back to top