canvas is not centered at the display element after resizing

[gorkemer]

Hello everyone,

RDK plugin positions the canvas using window.innerHeight and window.innerWidth. However, when I scale the window using resize plugin or virtual chin rest plugin, canvas origin (0,0) appears to move to the center of the screen. I've attached the shot of the result here.

I followed @becky-gilbert's and @vrsivananda's solution to similar issues (here and here) and I can make the dot cloud be located at the center of the canvas, but the center of the canvas itself is not centered at the display element.

EDIT:

like this:

canvas_width: function(){
          return window.innerWidth
        },
canvas_height: function(){
          return window.innerHeight
        }

This happened for all "cm"/"inch"/"deg" resizing units in virtual-chinrest.

I can see that canvas dimensions are equated to the window dimensions inside the RDK plugin,

var canvasWidth = canvas.width = window.innerWidth;
var canvasHeight = canvas.height = window.innerHeight;

EDIT: it appears canvas top-left corner (canvas.getBoundingClientRect().top; canvas.getBoundingClientRect().left;) locations are updated after resizing.

but I couldn't understand why the canvas origin (0,0) translates from the top left corner to the center of the screen. Is there a way to move the canvas to the top-left of the screen?

EDIT: I tried ctx.translate(0, 0); command inside the plugin, but I think that needs to be updated after the window is resized. I can't seem to locate a command similar to that used for the resize plugin which causes this issue, but am I missing something?

I created a minimal example for this problem. You can download/clone and run to see the problem - it is also accessible with this link.

Thank you,
Gorkem

[gorkemer]

removing `canvas.style.position = 'absolute'; from the RDK plugin resolved this issue, though this change brought back the scroll bar to the screen.

[gorkemer]

update: one can include body.style.overflowY = "hidden" to the RDK plugin to hide the scroll bar.