CODEWITHSUNDEEP
fabricjs
user1144596
user1144596

Reputation: 2088

Adding text over images in fabricjs

developing this app in which there several images on a canvas and i am using using fabricjs.

i want to add text overlaid on an image and then be able to remove it as well.

is a way to directly write over the image or do i have to create another layer and write onto it.

there is text related like

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

the problem with the above approach is that if the image moves the text will not, so is it possible that the text could be written directly above the image?

any ideas of how this could be done? i revived several discussions where it's not as clear, how it could be done.

any pointers would be most appreciated.

Upvotes: 2

Views: 4691

Answers (2)

Ankit Joshi
Ankit Joshi

Reputation: 193

I am not quite clear of what exactly is your requirement.

Regardless of it, i have created a JS Fiddle for you.

https://jsfiddle.net/xpntggdo/9/

textBox=new fabric.Textbox("Enter Text",{
fontSize: 16,
fontFamily: 'Arial',
textAlign: 'left',  
width: 180, // for 20 characters
top:arrowTop,
left:arrowLeft
});

canvas.add(textBox);
canvas.renderAll();

This might be of a little help at least. Comment on this answer and I will try to help you more on it if that is possible for me.

Upvotes: 1

ɢʀᴜɴᴛ
ɢʀᴜɴᴛ

Reputation: 32869

This could be achieved by creating an image and a text object, then adding both the objects to a group and finally adding that group to the canvas.

Here's an example, showing that in action ...

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

// load image
fabric.Image.fromURL('https://i.imgur.com/Q6aZlme.jpg', function (img) {
    img.scaleToWidth(100);
    img.scaleToHeight(100);
    
    // create text
    var text = new fabric.Text('hello world', {
        left: 10,
        top: 5,
        fontSize: 15,
        fontFamily: 'Verdana',
        fill: 'white'
    });
    
    // add image and text to a group
    var group = new fabric.Group([img, text], {
        left: 50,
        top: 50,
    });
    
    // add the group to canvas
    canvas.add(group);
});
canvas{border:1px solid #ccc}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.11/fabric.min.js"></script>
<canvas id="canvas" width="200" height="200"></canvas>

Upvotes: 2

Related Questions