Question

99

set width and height of canvas in fabric.js

rated 0 times [ 106] [ 7] / answers: 1 / hits: 27594 / 10 Years ago, tue, april 29, 2014, 12:00:00

I have an image background in my HTML5 canvas.

var canvas = new fabric.Canvas('#canvas1');

canvas.setBackgroundImage(

            'http://fabricjs.com/assets/jail_cell_bars.png',

             canvas.renderAll.bind(canvas)

       );

How to set dimensions of my canvas (width, height) to the dimensions of the background image?

Thanks.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

tierney

Add To Favorites

Follow

Total Points: 45

Total Questions: 101

Total Answers: 94

Location: Sudan

Member since Thu, May 7, 2020

4 Years ago

answered 10 Years ago jameson · Accepted Answer

You can use CSS or dom properties to set the dimensions of your canvas. If you know the dimensions of your image, you can do it in a stylesheet:

#canvas1 { width: XXXpx; height: YYYpx; }

Or in the dom:

<canvas id=canvas1 width=XXX height=YYY></canvas>

If the image is dynamic and want to set the dimensions in JS, you do something like this:

var image = new Image()

image.src = 'http://fabricjs.com/assets/jail_cell_bars.png';



image.onLoad = function () { 

  var canvas = document.getElementById('canvas1');



  canvas.width = image.width;

  canvas.height = image.height;

};