Pts overwriting CSS sizes

[stefa168]

I am currently experiencing an issue which involves pts and a canvas element with its width and height set to a specific value.

When the page is loaded (or if resized in the case that the canvas has been set to resize in setup) I noticed that pts actually sets the canvas' sizes to their values on load (or when resized).

I am in a situation where I need the CSS not to be overridden, since I need a pts canvas to fill a part of the page even if it has been resized. The main reason is that if the canvas is enlarged vertically, and then the page is shrunk, the canvas doesn't shrink anymore.
I have created a JSFiddle to illustrate my problem.
To reproduce it, the preview window has to be enlarged vertically, and then shrunk back to a smaller size.

I believe that the main causes of this effect are lines 200-201 of Canvas.ts inside resize, where the canvas has its height and width set:

this._canvas.width = this.bound.size.x * this._pixelScale;
this._canvas.height = this.bound.size.y * this._pixelScale;

I obviously can override the CSS values (set on lines 202-203), however the former couple of assigments is preventing me from resizing the canvas with my rules (I even tried setting resize inside the setup call to false, however the result is the same since resize is called at least once in any case, from what I understood from the source code).

I am currently looking into a solution and I'd like to send a PR if my issue is actually a problem and not my fault.
Would it be of any use? Are there any guidelines that I should follow?

[williamngan]

Hi @stefa168 -- thanks for opening the issue and sorry about the late response.

The Pts canvas should resize to fit the parent container's size. So I wonder if you can apply your custom css on the parent div, and then the canvas should resize accordingly. Would something like this work for your use case --

<style>
#container {
  position: absolute; top: 0; bottom: 0; width: 50vw;
}
</style>
...
<div id="container"><canvas id="pts /></div>
...
new CanvasSpace("#pts").setup({resize: true, ...})
...

One of the reason that the canvas has style attribute is to support higher pixel density (eg, retina screens). Not sure if we can remove it completely.

[williamngan]

Hi, closing this now. Please reopen if it continues to be an issue.