Resize the canvas with fabric js

javascript html5-canvas fabricjs
Rohan210 picture Rohan210 · Mar 23, 2013 · Viewed 20.8k times · Source

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.

Answer

JR. picture JR. · Sep 23, 2013

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();

Related questions

Need to change the canvas background color while using fabric js

I've a canvas element and I create fabric object out of that. Now, I want to change the background color dynamically. The following doesn't work for me. var x; x = new fabric.Canvas("mycanvas", { backgroundColor : "#fff", selection: true }); x.backgroundColor = "#…

Read More
Fabric.js - Free draw a rectangle

I have the following which doesn't work correctly: var canvas = new fabric.Canvas('canvas'); canvas.observe('mouse:down', function(e) { mousedown(e); }); canvas.observe('mouse:move', function(e) { mousemove(e); }); canvas.observe('mouse:up', function(e) { mouseup(e); }); var started = …

Read More
Select All the objects on canvas using Fabric.js

Is there a way to explicitly select all the objects present at a particular instance of time. This can be easily done using mouse to select all. Is there a code-solution like a button named Select All so that clicking …

Read More