onclick and other mouse based methods stop working in scalable applications

[SBUtltmedia]

Greetings:

We've been working on a project for some while designed to help neurobiology students identify different parts of the human brain, a game called BrainPicker, the first part of which you can play here. The idea is that students can click on the highlighted region (which will be hidden in the final version) and the game leaves a marker there, and if they place enough markers on the correct structure they receive points.

The problem we've been having recently is that ever since we've changed the program to support scaling (objects become larger and smaller based on percentages of the window size, and the main content conforms to a 16 x 9 ratio) our onclick event no longer identifies the correct coordinates. Now normally I'd expect this to happen if the canvas weren't drawing the objects correctly, because then there'd be nothing to click on. Rather, in this case all the shapes are being drawn properly by jCanvas- but for some reason they just aren't clickable.

Right now we've set it up so our pins are only drawn if the object is clicked, and there's a small black box that gets drawn to a new layer every time the shape is hovered over.

click: function(e) {
            //console.log("Hit");
                addToClickList(e._eventX, e._eventY, true);
                $.ajax({
                    type: "POST",
                    url: "save.php",
                    data: "x=" + e.eventX + "&y=" + e.eventY
                });
            },
            mouseover: function(e)
            {
               $('canvas').drawRect({
                layer: true,
                fillStyle: '#000',
                x: e.eventX, y: e.eventY,
                width: 10,
                height: 10
            });

As you'll notice, the actual shape and where the mouseclick and onmouseover events activate are two completely separate things. We've tried a few things, including differentiation between e._eventX and e.eventX, etc but none of that has worked.

So if you could take a look at our program, and also if you need to see our javascript file you can look at it here we'd appreciate that.

Thanks in advance.

TLL Media Lab StonyBrook University

[caleb531]

"Clearing" the canvas by removing layers and then readding them will lead to all kinds of issues. You should instead utilize the setLayer() method to change the properties of your existing layers.

[ghost]

Hello again, We've changed from adding and removing layers to creating a layer group for each brain slice and use the setLayerGroup method to change the visibility of the current group as you suggested, however the click event for the poly that we are creating on each layer still seems to be offset from the poly itself. particularly after resizing the browser.

The orange area is the poly that has a click event and We've added a mouseover event which logs to the upper right "CRT" to illustrate the offset issue.

Any help would be appreciated,

TLL Media Lab StonyBrook University

[ghost]

Oops , same URL, but just in case https://apps.tlt.stonybrook.edu/BrainPickerDev/index.html

[caleb531]

I see that you are scaling the canvas via CSS width and height, and you are doing the same for its parent container. In short, don't do that. :P

Altering the canvas's width and height via CSS will scale the canvas and skew the coordinate system, because doing so does not change the physical dimensions as you might like. The effect is also compounded when you are controlling the width/height of the canvas's container via CSS, are you are doing. Changing the canvas's width and height attributes is the only reliable way to change the dimensions of the canvas.