box shadow canvas

Benchmark created by PlayMyCode on December 6, 2011

Preparation HTML

<div id="wrap">
    <div>
        <div>
            <canvas id="canvas" width="300" height="300"></canvas>
        </div>
    </div>
</div>

Setup

var wrap = document.getElementById( 'wrap' );
    var canvas = document.getElementById( 'canvas' );
    
    var firstRunA = true;
    var firstRunB = true;
    
    function setShadow( isSet, style, shadow, radius ) {
        if ( isSet ) {
            style['boxShadow'] = shadow;
            style['WebkitBoxShadow'] = shadow;
            style['MozBoxShadow'] = shadow;
    
            style['borderRadius'] = radius;
            style['WebkitBorderRadius'] = radius;
            style['MozBorderRadius'] = radius;
            return true;
        } else {
            return false;
        }
    }
    
    function fillCanvas( canvas ) {
        var SIZE = 10,
            ctx = canvas.getContext( '2d' ),
            w = canvas.width,
            h = canvas.height;
    
        ctx.clearRect( 0, 0, w, h );
        for ( var x = 0; x < w; x += SIZE ) {
            for ( var y = 0; y < h; y += SIZE ) {
                var r = (x) % 255,
                    g = (y*7) % 255,
                    b = (x*y) % 255;
                ctx.fillStyle = 'rgb( ' + r + ',' + g + ',' + b + ')';
                ctx.fillRect( x, y, SIZE, SIZE );
            }
        }
    }

Test runner

firstRunA = setShadow( firstRunA, wrap.style, 'none', 'none' );
fillCanvas( canvas );

firstRunA = setShadow( firstRunA, wrap.style, '4px 4px 4px rgba(0,0,0,0.3)', '6px' );
fillCanvas( canvas );

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.

• Revision 1: published by PlayMyCode on December 6, 2011