Not sure how to get the correct size of Canvas

[Neil Aggarwal]

Hello everyone:

I am not sure how to get the correct size of a Canvas.

When I create the Canvas, it keeps telling me it is 300 x 150.
I get that size if I try to grab it in the onModuleLoad method
or from an attach event. They both keep telling me the Canvas
is 300 x 150.

But when I use a ClickEvent handler, the clicks are for an element
which is 900 x 450.

I tried extending the Canvas into a MyCanvas so I could add code
to the onload method, but its constructor is private so I can't override
it.

I am attaching my sample code.

You can see it running here:
https://dev.3dmathpuzzles.com/3dmp/play.html

Any guidance on this?

Thank you,
Neil

--
Neil Aggarwal, (972) 834-1565, http://www.propfinancing.com
We offer 30 year loans on single family houses!

[hprc]

The returned value should be the coordinates seen from the entire browser.
If you return an offset value from the absolute value of the Canvas it belongs to, you should get the correct value on the Canvas.
kazu...@gmail.com

2024年12月13日金曜日 2:07:53 UTC+9 Neil Aggarwal:

[Colin Alworth]

The onLoad method is called at the same time (in terms of lifecycle) as the AttachEvent - consider something like

canvas.addAttachHandler(e -> {

  // collect info here

});

It looks like you already implement that event handler interface, AttachEvent.Handler, so you're already being notified via the call to onAttachOrDetach.

The code you have already ostensibly to measure the size of the canvas isn't doing what you think it should be doing - the method call is getCoordinateSpaceWidth/getCoordinateSpaceHeight. This doesn't ask "how big is the canvas in pixels on my screen" but instead "how many pixels are in the canvas I've created. Try resizing the window - your "20x20" rectangle at position "10x10" is likely substantially larger than you would expect, because it lives within that coordinate space. You probably also notice that its borders are quite fuzzy too...

This is a common point of confusion when getting started with <canvas>, especially with high-density displays, where you would desire a bigger coordinate space than the "actual pixels" that the canvas occupies. This makes sure you are able to draw in the "sub pixels" that the screen uses to represent content.

To get the "real" size, use getOffsetWidth() and getOffsetHeight(). With those values, *tell* the canvas how big you want it to be (via setCoordinateSpaceHeight/setCoordinateSpaceWidth), but you may want to check if there are subpixels to worry about, and multiple accordingly.

GWT's Canvas is a fairly thin wrapper over the DOM's own canvas element. If you're just getting started with this, consider using elemental2's Canvas (in com.google.elemental2:elemental2-dom), and doing some reading on the browser feature itself, such as at https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas.

[Neil Aggarwal]

Colin:

 

> To get the "real" size, use getOffsetWidth() and getOffsetHeight().

> With those values, *tell* the canvas how big you want it to be (via setCoordinateSpaceHeight/setCoordinateSpaceWidth)

 

Ahh, got it.

 

I called the get offset width and height in onAttachOrDetach and
then multiplied those values by a constant and called the setCoordinateSpace
methods.  Now it makes sense.

 

It is interesting the ClickEvent.getX() and getY() are giving me coordinates in the
screen space instead of the coordinate space, but that is an easy multiplication
to do.

[Craig Mitchell]

> With those values, *tell* the canvas how big you want it to be (via setCoordinateSpaceHeight/setCoordinateSpaceWidth)

Depending on your game, you might want to have fixed setCoordinateSpaceHeight / setCoordinateSpaceWidth sizes, so every device gets the same game detail (plus make programming the game easier).  Then set the width and height of the canvas element to fit the screen size:

canvas.getElement().getStyle().setWidth(xxx, Unit.PX);
canvas.getElement().getStyle().setHeight(xxx, Unit.PX);

[Neil Aggarwal]

> Depending on your game, you might want to have fixed
> setCoordinateSpaceHeight / setCoordinateSpaceWidth sizes,
> so every device gets the same game detail (plus make programming the game
> easier). Then set the width and height
> of the canvas element to fit the screen size:

That is a good suggestion. For now, I am thinking I will let the display
size be based on the user's screen and see how that
goes.