Hide object in canvas

Question

I want to know that, Is it possible to hide text object in canvas using fabric js?
I don't want to remove object, as I need it in further use, so just want to hide it. I searched a lot, but didn't work anything. Here is my code of fabric js.

var text = new fabric.Text("test", {
                    fontFamily: 'Times new roman',
                    fontSize: fabric.util.parseUnit(fontSize),
                    left: (startPosition.x + pointer.x) / 2,
                    top: ((startPosition.y + pointer.y) / 2) + 10,
                    slope: ((startPosition.y - pointer.y) / (startPosition.x - pointer.x)),
                    originX: 'center',
                    originY: 'center',
                });

canvas.add(text);
//canvas.getObjects(text).style.display = "none";
//text.prop.hide();
//text.hide = function () {
//text.set({
//        css: {"display":"none"},
//        selectable: false
//    });
//};

All suggestions are exceptable.

score 3 · Answer 1 · answered Aug 06 '17 at 11:54

3

In my case I've used opacity to show/hide object, not only text. Example:

if (logoPosition == 5) {
  logo.opacity = 0;
}
else {
  logo.opacity = 1;
}

P.S. do not forgot to re-render your canvas after that change. I've used canvas.renderAll();

Found this advice here: https://groups.google.com/forum/#!topic/fabricjs/cbdFgTH7UXc

answered Aug 06 '17 at 11:54

gorodezkiy

3,299
2
34
42

This method isn't so great if you already have custom opacity set on objects. Now you have to worry about storing/reverting opacity. – Kalnode Jul 05 '21 at 12:12

score 2 · Answer 2 · answered Jun 15 '22 at 21:52

2

text.visible = false;

From the Fabric Object class

https://github.com/fabricjs/fabric.js/blob/master/src/shapes/object.class.js#L409

answered Jun 15 '22 at 21:52

Malcolm Swaine

1,929
24
14

score -1 · Answer 3 · answered Jun 03 '16 at 06:04

-1

Use Query Selector to hide the object.

// Pass the appropriate values to query selector of the canvas which we need to hide, In your code snippet you have given it as center, replace it with numeric values 

var query="canvas[x= fill the value of x ][y= fill the value of y][height= 'give the height'][width='give the width']";

// Finding the canvas
var canvas=document.querySelector(query);

// Hide the canvas
canvas.style.display="none";

Hope this helps

answered Jun 03 '16 at 06:04

Clement Amarnath

5,301
1
21
34

Thanks for quick reply, I have a query that as I have a text object, How can I get x,y,height & width of object? – Trusha Savsani Jun 03 '16 at 06:10
You would have placed this text object in the DOM, find the coordinates of that place where you have this object. – Clement Amarnath Jun 03 '16 at 06:18
One more query, After setting display-none property, Will I get value of text object, even it is not displaying on canvas? – Trusha Savsani Jun 03 '16 at 06:50
Yes you should be able to get the value of text object, even if it is hidden. – Clement Amarnath Jun 03 '16 at 07:19

Hide object in canvas

3 Answers3