Resizing problem. Please help!

[Natali Bezguskova]

Hi everyone!

I working on an app with React + Paper js.

The canvas is in div that lays upon img.On click, the user draws the circle on canvas.

Problem: the desktop size of canvas is 16:9, in mobile 4:5 - so when we have a circle that drawn in 16:9 and we resize window but on desktop - the positioning of the circle stays the same. But if I resize it to mobile view the positioning of the circle is wrong. If I create a circle in 4:5 and try to see in 16:9 - I have the same problem.

Only if the circle created in one view(16:9 or 4:5), and we try to see it with a different one.

New view's position is wrong, but somehow it is almost where, about 20-30px on horizontal or vertical axes from the proper position. 

If it helps, when creating in 16:9 and showing in 4:5 only y coordinate is wrong.

When creating in 4:5 and showing in 16:9 only x coordinate is wrong.

I achieve the proper displaying then resize by this: 

---saving position of bubble converted in persentages using the hight and width on the current canvas----

toolOnMouseDown(e) {
var x = (e.point.x / (this.props.width / 100));
var y = (e.point.y / ( this.props.height / 100));
var coordinates = ( {x: x, y: y});
}

----displaying circle by converted they x,y from percentages to coordinates-----

var position = {

x: ((this.props.width / 100) * coordinates.x), 

y: ((this.props.height / 100) * coordinates.y)

}

--------My css:

canvas {
           position: absolute;
           z-index: 1;
           width: 100vw;  

           height: calc(100vw * 9 /16);  }

@media screen and (max-width: 499px){  canvas { height: calc(100vw * 5 / 4);}. }

-------The component containig canvas:

return (.     <div ><canvas id="canvas" resize="true"/>

                    {this.displayCircles()}
                     </div>.     );

Hope that my explanation is understandble (:

Can I  solve this problem with some additional math? 

Or how save the coordinates getting from mouseEvent onClick but relatively of the view.center not the topleft(0,0) and displaying relatively of the view.center too?

[asensi...@gmail.com]

Hi,

In order for us to help you better, maybe you could try to reduce your issue as much as possible and post it somewhere on the web (https://stackblitz.com, http://github.com, ...) ?

Maybe you could even try to reproduce the issue outside of react ?
That way, I'm sure that we'll be able to help you.