Canvas fullscreen mode using fabric.js

Question

I try to use a fullscreen mode (HTML5 fullscreen) for a canvas object of Fabric.js.

var canvas = fabricCanvas.getSelectionElement();
if(canvas.requestFullScreen) {
    canvas.requestFullScreen();
}
else if(canvas.webkitRequestFullScreen) {
    canvas.webkitRequestFullScreen();
}
else if(canvas.mozRequestFullScreen) {
    canvas.mozRequestFullScreen();
}

The problem is, that events don't work in fullscreen mode. I suppose it is caused by using 2 canvases in Fabric: lower for drawing and upper for events. During the passing to fullscreen mode the lower canvas become "upper". Also, I've tried:

var canvas = fabricCanvas.getSelectionElement();

In this case, there are events, but no visualization. Any ideas how to solve this?

Stefan Haustein Stefan Haustein · Accepted Answer · 2014-10-20T09:16:02

Bring the container that contains both, the selection and canvas element to fullscreen. I am not super familiar with fabric, you could try

var canvas = fabricCanvas.getSelectionElement().parentNode;
if(canvas.requestFullScreen) {
  canvas.requestFullScreen();
}
else if(canvas.webkitRequestFullScreen) {
  canvas.webkitRequestFullScreen();
}
else if(canvas.mozRequestFullScreen) {
  canvas.mozRequestFullScreen();
}

There is probably a better way in fabric.js to get hold of the container than .parentNode.

Canvas fullscreen mode using fabric.js

1 Answers