How to get the correct canvas dimensions?

[ruturaj20]

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.

[JoãoCésar · Accepted solution]

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

[ruturaj20]

Thank you

[JoãoCésar]

You're welcome.