2

I need to display a large canvas as a smaller one for the purposes of good user interaction, but uploading a large canvas later. I am using Fabric.js and am trying the Canvas css trick where you set the width/height for the canvas in HTML and then set it via CSS to smaller one as documented here:

fabric.js resize canvas to fit screen

When I attempt to resize as follows, it makes the canvas 300x150 (default canvas) and doesn't respect my CSS.

HTML:

<canvas id="c"></canvas>

JavaScript:

var canvas = new fabric.Canvas('c', {
        });

canvas.width = 1000;
canvas.height = 1000;

CSS:

#c {
    width: 650px;
    height: 436px;
}

How can I adjust the "size" of the canvas the user interacts with while maintaining the "actual size" of the larger canvas via fabric.js? I am using bootstrap as well and am unsure if this would have any impact.

Community
  • 1
  • 1
Kode
  • 3,073
  • 18
  • 74
  • 140

1 Answers1

1

Replace your javascript code with: 

 var canvas = new fabric.Canvas('c', {});  
    canvas.setWidth(1000) ;  
    canvas.setHeight(1000);
BKR
  • 433
  • 3
  • 12
  • No such luck. It makes the canvas 1000px wide and doesn't respect the CSS – Kode Sep 30 '15 at 20:29
  • If you replace the CSS with `.canvas-container canvas { width: 650px; height: 436px; }` it makes a difference ? – BKR Sep 30 '15 at 20:34
  • No, which has me wondering if this is an issue with bootstrap interfering – Kode Sep 30 '15 at 20:39
  • Adding !important to your width and height CSS properties fixes the issue, as can be shown in this minimal [fiddle](http://jsfiddle.net/a93e88br/) – BKR Sep 30 '15 at 20:48
  • That did it! Thank you. – Kode Sep 30 '15 at 20:57
  • That's awkward since !important should block these properties and can't be overwritten anymore. – BKR Sep 30 '15 at 20:57
  • I had an error on my side, once I fixed that with the CSS being "saved", it worked! – Kode Sep 30 '15 at 20:58