Canvas connectives (HTML5)

Question

Canvas connectives (HTML5)

I have successfully implemented a user interface, but I am experiencing lower FPS during certain moments. After conducting a performance test with Firefox, I have realized that these FPS drops occur when the browser re-calculates CSS.

The CSS recalculations are triggered by my modification of the "style" property to insert the CSS rule "cursor: pointer". I am doing this to change the cursor for specific links in my canvas. However, I am looking to optimize this feature to prevent any freezing issues. Do you have any suggestions on how I can achieve this optimization?

Here is a breakdown of my code: I add an event handler to the canvas for mousemove events. Each time the event is triggered, it checks the cursor coordinates. If the cursor is positioned over a link, it changes the cursor to "pointer" and sets a variable called hoverIndex to the position of the link in the array.

var sky = new Image();
var logotype = new Image();
var back_btn = new Image();
var next_btn = new Image();
var upgrades_btn = new Image();

var coin_five = new Image();
var coin_ten = new Image();
var coin_fifty = new Image();
var cash_hundred = new Image();

var currentArea = "main_menu";
var cvn, ctx;

var linkAreas = [];
var hoverIndex = -1;

var gameVersion = "1.2.2a";

var coinFiveReset = 1500;
var coinTenReset = 5000;
var coinFiftyReset = 10000;
var coinHundredReset = 10000;

var coinFiveRemaining = 1500;
var coinTenRemaining = -1;
var coinFiftyRemaining = -1;
var coinHundredRemaining = -1;

var playingInterval;

//{type: "five", x: 0, y: 0}
var coinsPlaying = [];

function initialization(){
    cvn = document.getElementById("kg_coinfactory");
    ctx = cvn.getContext("2d");

    cvn.addEventListener("mousemove", function(ev){
        var pos = getMousePosition(ev);
        for(var x = 0; x<linkAreas.length; x++)
            if(currentArea == linkAreas[x].area && pos.x >= linkAreas[x].x && pos.y >= linkAreas[x].y && pos.x <= linkAreas[x].x + linkAreas[x].width && pos.y <= linkAreas[x].y + linkAreas[x].height)
            {
                hoverIndex = x;
                cvn.style = "cursor: pointer";
                break;
            }
            else
            {
                cvn.style = "";
                hoverIndex = -1;
            }
    });

    cvn.addEventListener("mouseup", function(){
        if(hoverIndex != -1)
            linkAreas[hoverIndex].onClickFunc();
    });
}

function getMousePosition(ev){
    var rect = cvn.getBoundingClientRect();
    return {x: ev.clientX - rect.left, y: ev.clientY - rect.top};
}

function registerLink(x, y, text, area, ctx, onClickFunc)
{
    var s = ctx.measureText(text);
    linkAreas.push({x: x, y: y - 24, width: s.width, height: 24, area: area, onClickFunc: onClickFunc});
}

javascript css html canvas

Answer 1

Answer №1

Is the drop in FPS really a cause for concern?

One solution could be to store the current cursor status and only change it if the cursor enters or leaves the hover areas.

Alternatively, if mouse events are not needed on the canvas under the hover areas, you could use position:absolute to place a DOM element over the canvas and have that element respond to hover and click events.

Another option is to hide the pointer when over the canvas and create custom pointers using drawImage.

For a more extreme approach, you could overlay a second canvas on top of the existing one and draw only the pointer on the second canvas. By setting pointer-events:none on the second canvas, mouse events will pass through to the underlying canvas.

Additionally, optimize your mouse position calculations for efficiency.

Instead of calling getBoundingClientRect for every mousemove event, save the rect.left and rect.top values once and use the saved offsetX and offsetY values. Recalculate the bounding box only when necessary, such as on window resize or scroll.

Minimize external function calls like getMousePosition for better performance. Calculate the mouse position directly inside your mouse event handler to reduce processing.

Finally, streamline your mouse event handler by indicating to the browser that the event does not need to bubble to other elements:

// inform the browser that we are handling this event
ev.preventDefault();
ev.stopPropagation();

An optimized mouse event handler could be structured like this:

cvn.addEventListener("mousemove", function(ev){    

    // inform the browser that we are handling this event
    ev.preventDefault();
    ev.stopPropagation();

    // calculate the mouse position directly within the handler
    // using cached offset values
    mouseX=parseInt(ev.clientX-offsetX);
    mouseY=parseInt(ev.clientY-offsetY);

    ... carry out necessary actions ...

}

Answer 2