Hello . I'm trying to make a combat board for an RPG game that can be moved around and resized .
Since the board needs to be contained within a certain portion of the screen , i'm using a calculation with CanvasToLayerX to pin a sprite to a certain position . This sprite acts as a mask that stops the grid from getting out of it ( using the "source atop" effect ) .
In the pictures below , the grid is represented as the big red sprite .
In Firefox , Edge and NW , the mask pins to the exact position . However , in Chrome , the mask pins slighty more to the left for some reason . Here are some prints :
The zoom % alters the scale of the layer .
Since the mask needs to be in the same layer as the grid for the effects to work , it means it is also affected by the scaling . For that , it's size compensates for the scale so it remains constant .
And for the position , i use these calculations :
(spr_combatbackground is the background window the mask is supposed to be contained in)
Why is this happening only on Chrome ?
Is there any better way to do what i am doing ?
Thanks in advance