How to get the correct canvas dimensions?

Community Beginner ,
Dec 21, 2020

Copy link to clipboard

Copied

I get different dimensions for the canvas with canvas.width and canvas.style.width, despite turning off responsive scaling. If I try to place an object at the canvas.style.width (i.e. parseFloat(canvas.style.width.split("px")[0])), then it is placed as I expect it to be, but not with canvas.width. 

 

For example: 

1) No Responsive Rescaling: 

canvas.style.width: 100px

stage.scaleX: 1.25

canvas.width: 125

when object.x: canvas.width - Object gets placed incorrectly, very far away from the edge.

when object.x: canvas.style.width - Object gets placed correctly, at the edge as expected.

 

2) With Responsive Rescaling:

canvas.style.width: 101.072px

stage.scaleX: 1.2634048257372654

canvas.width: 126

when object.x: canvas.width - Object gets placed incorrectly, very far away from the edge.

when object.x: canvas.style.width - Object gets placed incorrectly, farther from the edge, acting as if the scaling hasn't changed (I tried console logging it. The dimensions do change).

 

I tried scaling the content with the document, and without it to no avail.

 

I could probably subtract the old stage scaling from the newer one after scaling, but how do I get the older stage scale factor in that case?

What am I doing wrong?

 

I have attached screenshots for four combinations of configurations to this question.

Views

57

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

1 Correct Answer

Adobe Community Professional , Dec 21, 2020
JoãoCésar Adobe Community Professional , Dec 21, 2020
Hi.   When the responsive settings are used, the scale of the stage will most likely change. And this change has to be taken into account.   You can divide canvas size by the stage scale like so:   this.object.x = canvas.width * 0.5 / stage.scaleX; this.object.y = canvas.height * 0.5 / stage.scaleY;     Or just use the dimensions stored in the global lib object (the same ones from the Document Settings) :   this.object.x = lib.properties.width * 0.5; this.object.y = lib.properties.height * 0.5; ...

Likes

Translate

Translate
Jump to answer Jump to answer
Adobe Community Professional ,
Dec 21, 2020

Copy link to clipboard

Copied

Hi.

 

When the responsive settings are used, the scale of the stage will most likely change. And this change has to be taken into account.

 

You can divide canvas size by the stage scale like so:

 

this.object.x = canvas.width * 0.5 / stage.scaleX;
this.object.y = canvas.height * 0.5 / stage.scaleY;

 

 

Or just use the dimensions stored in the global lib object (the same ones from the Document Settings) :

 

this.object.x = lib.properties.width * 0.5;
this.object.y = lib.properties.height * 0.5;

 

 

I hope it helps.

 

Regards,

JC

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Community Beginner ,
Dec 21, 2020

Copy link to clipboard

Copied

Thank you

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Adobe Community Professional ,
Dec 21, 2020

Copy link to clipboard

Copied

You're welcome.

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more