Draw Text on HTML5 Canvas Using Fabric.js - PartII

Drawing text in a HTML5 canvas with Fabric.js lib. over dynamically load image. And also display the result output in an image.

 Fabric.js   
 

Posted: November 3, 2018. | By: mustafa

Fabric JS is used to create free drawing, add text, and other objects like: circle, rectangle and transformation them, and so on.

In the previous article we have seen how to load image into canvas and draw a text over it. Today in this practical example we are going to see how to dynamically load an image in canvas and write some text over it. And then save & show the result out in an image.


 DrawTextonHTML5CanvasUsingFabric-PartII.png, Fabric.js, Asp.Net, MVC, HTML5, canvas, Draw Text, Fabric.js,

To start with, let us add a canvas to html and we have to add a text to the canvas element and apply fill color, stroke and images.

<canvas id="canvas" width="520" height="450"></canvas>

Drawing Images with Fabric.js


In Fabric.js, images are represented with fabric.Image object. The images can be created from a HTML element, and image source url or data. We have used fabric.Image.fromURL() to load image into canvas. Also we have added html input file tag and bind onchange eventhandler to load image on file browsing. Here we have added the js code to load the image dynamically into canvas and set its height and width and render the canvas.

 

 document.getElementById('uploadImg').onchange = function handleImage(e) {
 var reader = new FileReader();
 reader.onload = function (event){
 
 var oImg = new fabric.Image.fromURL(event.target.result ,function(image){
 
 image.set({
 angle: 0,
 padding: 10,
 cornersize: 10,
 height: 710,
 width: 810,
 
 });
 canvas.centerObject(image);
 canvas.add(image);
 canvas.renderAll();
});
 }
 reader.readAsDataURL(e.target.files[0]);
 }

 

Drawing text object with Fabric.js


Now let us add some text over an image. For adding some text we are going to use Fabric.js itext(), which gives support for adding some interactive text. Refer below code to add itext object in fabric add to canvas. We have bind addtext js function to button click in html input button.

 

 var addtext = function () {
 var itext = new fabric.IText('Adding text....', {
 
 left: 100,
 top: 100,
 fill: 'rgba(0,0,0,.84)',
 strokeWidth: 2,
 stroke: "#ffcf33",
 fontFamily: "Arial"
 });
 
 canvas.add(itext)
 canvas.renderAll();
 
 }

Next we are going to see how to save this image. And show the result output in a image below the canvas. For this we are going to use canvas dataUrl property to return the image source and display in html image tag on web page.

This can be very useful in creating a product designer tool, or creating a product collage.

 

var saveImage = function (e) {
 var img = $("#img1");
 //var img = new Image();

var data = canvas.toDataURL({
 format: 'png',
 quality: 0.8
 });
 
 $("#img1").attr('src', data);
 
 data = data.replace('data:image/png;base64,', '');
 };

Today we have learnt how to simply browse and load an image into canvas, add some text over image and change it. Then display the output in and resulting image. Also below I have added the complete html file with script to see the example. Thanks for reading, if you like this article then make a share.

 

<!DOCTYPE HTML>

<html>

<head>

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

<title>Draw Text on HTML5 Canvas Using Fabric.js - PartII</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>


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

<div class="col-lg-6">
 
 
 <input type="file" id="uploadImg" />
 <p>Choose a image file and add some text to it.</p>
 <input type="button" value="Click me to add some text." style="background-color: #bf6361; color: #fff;" onclick=
 "addtext();" />
 
 <input type="button" value="Show Image" style="background-color: #bf6361; color: #fff;" onclick= "saveImage();" />
 
 <div id="divCanvas">
 <canvas id="canvas" width="520" height="450"></canvas>
 </div>
 </div>


 
 <div class="col-lg-6" style="margin-top:05px;float:left;">
 <img id="img1" style="left:400px;top:400px;" />
 </div>

</div>


<script type="text/javascript">

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


 document.getElementById('uploadImg').onchange = function handleImage(e) {
 var reader = new FileReader();
 reader.onload = function (event){
 
 var oImg = new fabric.Image.fromURL(event.target.result ,function(image){
 
 image.set({
 angle: 0,
 padding: 10,
 cornersize: 10,
 height: 410,
 width: 510,
 
 });
 canvas.centerObject(image);
 canvas.add(image);
 canvas.renderAll();
 });
 }
 reader.readAsDataURL(e.target.files[0]);
 }

var addtext = function () {
 var itext = new fabric.IText('Adding text....', {
 
 left: 100,
 top: 100,
 fill: 'rgba(0,0,0,.84)',
 strokeWidth: 2,
 stroke: "#ffcf33",
 fontFamily: "Arial"
 });
 
 canvas.add(itext)
 canvas.renderAll();
 
 }
 
 var saveImage = function () {
 var img = $("#img1");
 //var img = new Image();

var data = canvas.toDataURL({
 format: 'png',
 quality: 0.8
 });
 
 $("#img1").attr('src', data);
 
 data = data.replace('data:image/png;base64,', '');
 };
</script>

</body>

</html>

 Below I have added a screensot of a above example in a web page.

DrawtextwithFabriclibjs.png, Fabric.js, Asp.Net, MVC, HTML5, canvas, Draw Text, Fabric.js,


related posts

Back to top