Canvas Tooltip

by samih

HTML

<button id="increaseWidth">Click Me</button>
<div class="timeline">
    <canvas class="tactics-canvas" width="200" height="200">
    </canvas>
</div>

CSS

.timeline {
    width: 100%;
    height: 400px;
    background-color: lightgray;
}

.tactics-canvas {
    width: 100%;
    height: 100%;
}

JavaScript

var canvas = $('.tactics-canvas')[0];
canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;
var context = canvas.getContext('2d');
var offsetX = canvas.offsetLeft;
var offsetY = canvas.offsetTop;

context.fillColor = '#FF0000';


var dataRect = {
    x: 25,
    y: 25,
    width: 100,
    height: 50
};

context.fillRect(dataRect.x, dataRect.y, dataRect.width, dataRect.height);

var tipHandler = function(event) {
    var mouseX = event.clientX - offsetX;
    var mouseY = event.clientY - offsetY;
    
    var xBounds = [dataRect.x, dataRect.x + dataRect.width];
    var yBounds = [dataRect.y, dataRect.y + dataRect.height];
    if (mouseX > xBounds[0] && mouseX < xBounds[1] && mouseY > yBounds[0] && mouseY < yBounds[1]){
        console.log('do a barrel roll!');
    }
}

$(canvas).on('mousemove', tipHandler);