Marquee Canvas

JavaScript performance comparison

Revision 2 of this test case created

Preparation code

<!DOCTYPE HTML>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
// inner variables
var marquee, context;
var dir = 1; //1 is left, -1 is right :)
var speed = 4; //higher is faster
var fontsize = "120px"; //font size as per CSS rules
var fontfamily = "Arial"; //font family as per CSS rules
var fontweight = "normal"; //font weight as per CSS rules
var fontcolor = "#000"; //Font colour as per CSS rules

//Now get ready to draw text
var font = fontweight+" "+fontsize+" "+fontfamily; //font style as per CSS rules
var mx;
var text;
var textlength;

function draw()
{
        marquee.width = marquee.width; //simplest way to clear a canvas frame
        context.fillStyle = fontcolor;
        context.font = font;
        context.textBaseline = "middle";
        context.fillText(text, mx, marquee.height / 2); //draw the text in the specified style
        
        mx -= dir; //move in the specified direction by 1.
        
        textlength = context.measureText(text); //this gives a pixel length of the text string
        
        if (mx < 0 - textlength.width) //Text has scrolled off the left hand side; restart it.
        {
                mx = marquee.width;
        }
        
        else if (mx > marquee.width) //Text has scrolled off the right hand side; restart it.
        {
                mx = 0 - textlength.width;
        }
}
</script>
</head>
<body>
<canvas id="marqueeCanvas" width="1025" height="70">TRASA: WAWRZYSZEW-STARE</canvas>
</body>
</html>
<script>
  Benchmark.prototype.setup = function() {
    marquee
    draw
    text
  };
</script>

Preparation code output

TRASA: WAWRZYSZEW-STARE

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
marquee
 
marquee =  document.getElementById('marqueeCanvas');
                context = marquee.getContext("2d");
                speed = 100;
                font = 'italic bold 65px/0px Arial, Helvetica, sans-serif';
                text = marquee.innerHTML;
                mx = marquee.width;
               
pending…
draw
 
setInterval(draw, 1000 / (speed * 10));
 pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

0 comments

Add a comment