CODEWITHSUNDEEP
javascriptcanvasfabricjs
bab
bab

Reputation: 2169

Hiding one canvas makes another canvas unselectable

In Fabric.js, if there are two canvases and one is hidden using jQuery, then the remaining canvas becomes uneditable. Why is that the case? Is there a solution to this problem? Here is a jsfiddle of the problem.

Html

<canvas id="c" width="200" height="50"></canvas>
<hr/>
<canvas id="c2" width="200" height="50"></canvas>
<button id="hide">hide the top canvas</button>

CSS

var canvas = new fabric.Canvas('c');
var canvas2 = new fabric.Canvas('c2');
canvas.add(new fabric.Text('hello', {left: 50, top: 40}));
canvas2.add(new fabric.Text('hi', {left: 20}));
$('#hide').click(function() {
    $('#c').parent().hide();
});

Upvotes: 3

Views: 2356

Answers (1)

Kienz
Kienz

Reputation: 3517

Just call canvas.calcOffset(); on your visible canvas after you hide the other canvas.

I've updated your jsfiddle: http://jsfiddle.net/pVE33/7/

Upvotes: 3

Related Questions