html5doctor ELEMENT effect

html5doctor_ELEMENT_effect

    var links = $("#glossary li a");
    links.each(function() {
        var linkWidth = $(this).outerWidth();
        
        var canvas = $("<canvas></canvas>");
        canvas.attr({width: linkWidth,height: 21});
        var context = canvas.get(0).getContext("2d");

        // Set up the rounded corners
        context.lineWidth = 6;
        context.lineJoin = "round";
        context.fillStyle = "#0090D2";
        context.strokeStyle = "#0090D2";

        // Draw the HTML5 Doctor logo
        context.beginPath();
        context.moveTo(4, 10);
        context.lineTo(8, 4);
        context.lineTo(linkWidth - 9, 3);
        context.lineTo(linkWidth - 3, 10);
        context.lineTo(linkWidth - 10, 18);
        context.lineTo(7, 16);
        context.closePath();
        context.stroke();
        context.fill();
        
        var image = canvas.get(0).toDataURL("image/png");
        $(this).hover(function() {
            $(this).css({background: "url('" + image + "') no-repeat"});
        }, function() {
            $(this).css({background: ""});
        });
    });