Exit
  • Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
  • 한국 커뮤니티
0

How to get the correct canvas dimensions?

Community Beginner ,
Dec 21, 2020 Dec 21, 2020

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.

500
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Expert , Dec 21, 2020 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;

...
Translate
Community Expert ,
Dec 21, 2020 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;

 

 

I hope it helps.

 

Regards,

JC

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

Thank you

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Dec 21, 2020 Dec 21, 2020
LATEST

You're welcome.

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