Test canvas text performance

by soulwire

HTML

<script src="http://fonts.googleapis.com/css?family=Lato:300,400,700"></script>
<script src="https://rawgithub.com/soulwire/sketch.js/master/js/sketch.min.js"></script>
<script src="https://rawgithub.com/mrdoob/stats.js/master/build/stats.min.js"></script>

JavaScript

var stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';
document.body.appendChild( stats.domElement );

function Text( text ) {
    
    this.text = text;
    this.x = 0;
    this.y = 0;
    this.scale = 1.0;
    this.rotation = 0.0;
}

Text.prototype.draw = function( ctx ) {
    
    ctx.font = "10px 'Lato', sans-serif";
    ctx.textAlign = 'center';
    
    ctx.save();
    ctx.translate( this.x, this.y );
    ctx.rotate( this.rotation );
    ctx.scale( this.scale, this.scale );
    ctx.fillText( this.text.toUpperCase(), 0, 0 );
    ctx.restore();
};

var words = 'at the age old pond a frog leaps into water a deep resonance'.split(' ');

var texts = [];

Sketch.create({
    
    setup: function() {

        for ( var i = 0; i < words.length; i++ ) {
            
            var text = new Text( words[i] );
            text.x = random( this.width );
            text.y = random( this.height );
            text.rotation = random( TWO_PI );
            text.scale = random( 1.0, 10.0 );
            texts.push( text );
        }
    },
    
    draw: function() {
        
        stats.begin();
        
        var text;
        
        this.beginPath();
        this.moveTo( 100, 100 );
        this.lineTo( this.width - 200, 100 );
        this.lineTo( this.width - 200, this.height - 200 );
        this.lineTo( 100, this.height - 200 );
        this.closePath();
        this.clip();
        
        this.globalAlpha = 0.1;
        
        for ( var i = 0; i < texts.length; i++ ) {
            text = texts[i];
            text.rotation += 0.01;
            text.scale += sin( this.millis * 0.001 );
            text.draw( this );
        }
        
        stats.end();
    }
});