How to get the correct canvas dimensions?
- December 21, 2020
- 1 reply
- 646 views
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.
