1 define([ 'util/ensureCallback', 'util/bench' ], function (ensureCallback, bench) {
2 var texts = [ 'hello world', 'other text' ];
3 var CANVAS_WIDTH = 640;
4 var CANVAS_HEIGHT = 640;
12 var fontSizes = [ 8, 10, 12, 14, 16, 24 ];
14 var stylePreparers = {
15 outline: function (context) {
16 context.strokeStyle = 'red';
19 fill: function (context) {
20 context.fillStyle = 'green';
23 fillOutline: function (context) {
24 context.strokeStyle = 'red';
25 context.fillStyle = 'green';
29 var styleExecutors = {
30 outline: function (context, text) {
31 context.strokeText(text, 0, 0);
34 fill: function (context, text) {
35 context.fillText(text, 0, 0);
38 fillOutline: function (context, text) {
39 context.fillText(text, 0, 0);
40 context.strokeText(text, 0, 0);
44 var styles = Object.keys(styleExecutors);
46 function runTest(fontFamily, fontSize, style, callback) {
47 callback = ensureCallback(callback);
49 var canvas = document.createElement('canvas');
50 canvas.width = CANVAS_WIDTH;
51 canvas.height = CANVAS_HEIGHT;
53 var context = canvas.getContext('2d');
54 context.font = fontSize + 'pt ' + fontFamily;
55 context.textBaseline = 'top';
56 context.textAlign = 'left';
57 stylePreparers[style](context);
59 var execute = styleExecutors[style];
60 var score = bench(100, function (i) {
61 execute(context, texts[i % texts.length]);
63 // FIXME I'd like to be able to verify that the drawing operation
64 // actually executed (and didn't defer), but getImageData (below)
65 // is too slow to run in a loop like this.
66 //context.getImageData(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT)[0];
70 score: score.toFixed(2)
74 // family => size => style => test
76 Object.keys(fontFamilies).forEach(function (fontFamilyKey) {
77 var fontFamily = fontFamilies[fontFamilyKey];
80 tests[fontFamilyKey] = subTests;
81 fontSizes.forEach(function (fontSize) {
82 var subSubTests = { };
83 subTests[fontSize] = subSubTests;
84 styles.forEach(function (style) {
85 subSubTests[style] = function (callback) {
86 runTest(fontFamily, fontSize, style, callback);