Resize the canvas with fabric js

Question

The application lets user save the designs and post it so other users can view it later.

The original canvas saved with the proportions of width=700 and height=600. But when displaying the canvas, I want to resize the canvas to fit into dimensions of (350,300). half of the original. But if I directly apply those dimensions and load width setWidth() and setHeight() it loads with original proportions.

All I want is to display the canvas with new dimensions.

This is most-definitely NOT a duplicate, as this involves fabric.js — Stephan Bijzitter, Jan 20 '15 at 13:27
Even though that was the case, the solution was more of a generic one. The solution didn't involve anything specific to fabricJS . So I won't argue. — Rohan210, Jan 20 '15 at 13:39

score 108 · Answer 1 · answered Sep 23 '13 at 15:57

108

If you are using the library fabric.js, that's not enough.

Considering that 'canvas' is the fabric.js instance object, you should do this to avoid distorsion artifacts:

canvas.setWidth( <desired width> );
canvas.setHeight( <desired height> );
canvas.calcOffset();

answered Sep 23 '13 at 15:57

JR.

1,401
1
11
9

9

This should be the accepted answer – Linga Dec 18 '17 at 10:44
Correct, if you are using fabric you need to do this. – ESX Nov 03 '19 at 20:10

score -16 · Accepted Answer · edited May 23 '17 at 11:54

-16

Previously answered here.

I'm not sure what you've been trying, but

var canvas = document.getElementsByTagName('canvas')[0];
canvas.width  = 800;
canvas.height = 600;

should work fine.

edited May 23 '17 at 11:54

Community

1
1

answered Mar 23 '13 at 10:08

Kat

4,645
4
29
81

23

This will not work on a fabric.Canvas – Stephan Bijzitter Jan 20 '15 at 13:26

Resize the canvas with fabric js

2 Answers2