DOM and canvas based button performance

Testing performance of 100 DOM elements combined with 100 canvas buttons.

HTML

<canvas id="canvas" width="200" height="200">

CSS

.button {
    width: 100px;
    height: 50px;
    line-height: 50px;
    position: absolute;
    right: 50px;
    top: 50px;
    color: #FFF;
    text-decoration: none;
    background: linear-gradient(#1879BD 50%, #084D79 50%);
    text-align: center;
    font-size: 15px;
    font-family: sans-serif;
}
.button:hover {
    background: linear-gradient(#678834 50%, #093905 50%);
}
.button:active {
    background: linear-gradient(#EB7723 50%, #A80000 50%);
}

body {
    margin: 0;
}

JavaScript

(function() {
    var body = document.getElementsByTagName('body')[0];
    var a = document.createElement('a');
    a.setAttribute('href', '#');
    a.setAttribute('class', 'button');
    
    for (var i = 0; i < 100; i++) {
        var newA = a.cloneNode();
        newA.textContent = 'Play';
        
        body.appendChild(newA);
    }
    
    var ctx = canvas.getContext('2d');
    ctx.font = '15px sans-serif';
    
    // mouse event variables
    var mousePosition = {
        x: 0,
        y: 0
    };
    var mousePressed = false;
    
    /**
     * Track the user's mouse position on mouse move.
     * @param {Event} event
     */
    canvas.addEventListener('mousemove', function(event) {
        mousePosition.x = event.offsetX || event.layerX;
        mousePosition.y = event.offsetY || event.layerY;
    });
    
    /**
     * Track the user's clicks.
     * @param {Event} event
     */
    canvas.addEventListener('mousedown', function(event) {
        mousePressed = true;
    });
    canvas.addEventListener('mouseup', function(event) {
        mousePressed = false;
    });
    
    /**
     * A button with hover and active states.
     * @param {integer} x     - X coordinate of the button.
     * @param {integer} y     - Y coordinate of the button.
     * @param {integer} w     - Width of the button.
     * @param {integer} h     - Height of the button.
     * @param {string}  text  - Text on the button.
     * @param {object}  colors - Default, hover, and active colors.
     *
     * @param {object} colors.default - Default colors.
     * @param {string} colors.default.top - Top default button color.
     * @param {string} colors.default.bottom - Bottom default button color.
     *
     * @param {object} colors.hover - Hover colors.
     * @param {string} colors.hover.top - Top hover button color.
     * @param {string} colors.hover.bottom - Bottom hover button color.
     *
     * @param {object} colors.active - Active colors.
     * @param {string}...