Update HTML5 canvas rectangle on hover

To update HTML5 canvas rectangle on hover, you need to handle mouse events and redraw the canvas. Here's how to create a rectangle that changes color when you hover over it.

Basic Setup

First, create a canvas element and get its context:

<canvas id="myCanvas" width="300" height="200" style="border:1px solid #000;"></canvas>

<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

// Draw initial rectangle
function drawRectangle(fillColor) {
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.rect(20, 20, 150, 100);
    context.strokeStyle = "black";
    context.stroke();
    
    if (fillColor) {
        context.fillStyle = fillColor;
        context.fill();
    }
}

// Draw initial rectangle
drawRectangle();
</script>

Adding Hover Effect

Add mouse event listeners to detect when the cursor enters and leaves the rectangle area:

<canvas id="myCanvas" width="300" height="200" style="border:1px solid #000;"></canvas>

<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

// Rectangle properties
var rect = {
    x: 20,
    y: 20,
    width: 150,
    height: 100
};

function drawRectangle(fillColor) {
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.beginPath();
    context.rect(rect.x, rect.y, rect.width, rect.height);
    context.strokeStyle = "black";
    context.stroke();
    
    if (fillColor) {
        context.fillStyle = fillColor;
        context.fill();
    }
}

// Check if mouse is inside rectangle
function isMouseInRect(mouseX, mouseY) {
    return mouseX >= rect.x && 
           mouseX <= rect.x + rect.width &&
           mouseY >= rect.y && 
           mouseY <= rect.y + rect.height;
}

// Mouse move event handler
canvas.addEventListener('mousemove', function(e) {
    var canvasRect = canvas.getBoundingClientRect();
    var mouseX = e.clientX - canvasRect.left;
    var mouseY = e.clientY - canvasRect.top;
    
    if (isMouseInRect(mouseX, mouseY)) {
        drawRectangle("lightblue");
        canvas.style.cursor = "pointer";
    } else {
        drawRectangle();
        canvas.style.cursor = "default";
    }
});

// Draw initial rectangle
drawRectangle();
</script>

Using jQuery (Alternative Method)

If you prefer using jQuery, here's the corrected version of the original approach:

<canvas id="myCanvas" width="300" height="200" style="border:1px solid #000;"></canvas>

<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

function drawRectangle(fillColor) {
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.beginPath();
    context.rect(20, 20, 150, 100);
    context.strokeStyle = "black";
    context.stroke();
    
    if (fillColor) {
        context.fillStyle = fillColor;
        context.fill();
    }
}

// jQuery hover events
$(canvas).hover(
    function() {
        // Mouse enter
        drawRectangle("blue");
    },
    function() {
        // Mouse leave
        drawRectangle();
    }
);

// Draw initial rectangle
drawRectangle();
</script>

Key Points

• Always use beginPath() before drawing shapes
• Clear the canvas with clearRect() before redrawing
• Use proper string quotes for color values: "blue" not blue
• The precise hover method detects mouse position within rectangle bounds
• The jQuery method applies hover to the entire canvas element

Conclusion

Canvas hover effects require clearing and redrawing the canvas. Use mouse position detection for precise hover areas or jQuery hover events for simpler canvas-wide effects.