Re: Not sure how to get the correct size of Canvas

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.

On Thursday, December 12, 2024 at 11:07:53 AM UTC-6 ne...@propfinancing.com wrote:

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!

--
You received this message because you are subscribed to the Google Groups "GWT Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-web-toolkit+unsubscribe@googlegroups.com.
To view this discussion visit https://groups.google.com/d/msgid/google-web-toolkit/4d1e9efb-8ee3-4538-8c4d-61acaafa8ddan%40googlegroups.com.