Canvas Responsive - Fabricjs

Question

I trying let the responsive canvas following this topic1 and topic2

I'm trying to let the responsive canvas for all devices.

I know it's possible but I'm having a tough time finding the solution.

Following the two topics above I tried to set the width and height for the max canvas size in javascript. And in the css for each device a different size to canvas view, even changing the CSS display size actual size defined in javascript must remain

I´m using fabric.js

SOLUTION

Note: stack Overflow view considering width 360px because of the preview in the post

  var canvas = this.__canvas = new fabric.StaticCanvas ('c');
  canvas.setHeight(600);
canvas.setWidth(800);

  canvas.setBackgroundImage('http://lorempixel.com/500/500/animals', canvas.renderAll.bind(canvas), { width: 800,height: 600 });
  
  var text = new fabric.Text('Hello', { left: 100, top: 100, fill: 'blue', });
canvas.add(text);

 #c{
     border:1px solid red;
     top:22px;
     left:0px;
     height: 100%;
     width: 99%;
 }

 @media screen and (min-width: 360px) {
  #c {   -webkit-transform : scale(0.4);
-webkit-transform-origin : 0 0; }
}    

@media screen and (min-width: 768px) {
  #c {   -webkit-transform : scale(0.45);
-webkit-transform-origin : 0 0; }
}
 
@media screen and (min-width: 992px) {
  #c {   -webkit-transform : scale(0.5);
-webkit-transform-origin : 0 0;}
}
 
@media screen and (min-width: 1200px) {
  #c {   -webkit-transform : scale(0.5);
-webkit-transform-origin : 0 0;}
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.js"></script>
<canvas id="c"></canvas>

score 0 · Accepted Answer · edited May 23 '17 at 12:31

0

Solution in my question. In topic1 I found it:

X4V1 answered Jun 16 '15 at 20:24

I have found a trick to do that without having to copy the canvas. This solution is really close to css zoom property but events are handle correctly.

This is an example to display the canvas half its size:

-webkit-transform : scale(0.5); -webkit-transform-origin : 0 0;

edited May 23 '17 at 12:31

Community

1
1

answered Jan 21 '16 at 02:30

Gislef

1,555
3
14
37

I think a drawback is that all gets scaled: if an element gets selected, the box with the controls to resize and rotate are also scaled. Probably not what one wants. – robsch Mar 09 '20 at 14:41

Canvas Responsive - Fabricjs

1 Answers1