canvas mouseenter tests

by gwatts

HTML

<div id="container"></div>

JavaScript

$(function() {
    var container = $('#container');
    for (var i=0; i<4; i++) {
        var p = $('<span><canvas style="display: inline-block; width: 100px; height: 50px; border: 1px solid black" id="c'+i+'"></canvas></span>')
        container.append(p);
        var c = $('#c'+i);
        var ctx = c[0].getContext('2d');
        ctx.rect(0,0,100,50);
        ctx.fillStyle = '#f00';
        ctx.fill();
        c.mouseenter(onmouseenter);
        c.mouseleave(onmouseleave);
    }
});

function onmouseenter() {
    console.log("mouseenter");
}

function onmouseleave() {
    console.log("mouseleave");
}