]>
Commit | Line | Data |
---|---|---|
f8990704 | 1 | <!DOCTYPE html> |
b92e282a | 2 | <html> |
da6dd893 JM |
3 | <head> |
4 | <title>Canvas Performance Test</title> | |
1b90deee | 5 | <!-- |
da6dd893 JM |
6 | <script type='text/javascript' |
7 | src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script> | |
1b90deee | 8 | --> |
5e55378b JM |
9 | <script src="../include/util.js"></script> |
10 | <script src="../include/webutil.js"></script> | |
11 | <script src="../include/base64.js"></script> | |
ac99a1f7 | 12 | <script src="../include/display.js"></script> |
da6dd893 JM |
13 | <script src="face.png.js"></script> |
14 | </head> | |
b92e282a | 15 | <body> |
97763d0e JM |
16 | Iterations: <input id='iterations' style='width:50' value="100"> |
17 | ||
d93d3e09 JM |
18 | Width: <input id='width' style='width:50' value="640"> |
19 | Height: <input id='height' style='width:50' value="480"> | |
20 | ||
21 | <input id='startButton' type='button' value='Do Performance Test' | |
22 | style='width:150px' onclick="begin();"> | |
97763d0e JM |
23 | |
24 | <br><br> | |
25 | ||
d93d3e09 JM |
26 | <b>Canvas</b> (should see three squares and two happy faces):<br> |
27 | <canvas id="canvas" width="200" height="100" | |
b92e282a JM |
28 | style="border-style: dotted; border-width: 1px;"> |
29 | Canvas not supported. | |
30 | </canvas> | |
97763d0e JM |
31 | |
32 | <br> | |
33 | Results:<br> | |
34 | <textarea id="messages" style="font-size: 9;" cols=80 rows=25></textarea> | |
b92e282a JM |
35 | </body> |
36 | ||
b92e282a | 37 | <script> |
97763d0e | 38 | var msg_cnt = 0; |
ac99a1f7 | 39 | var display, start_width = 300, start_height = 100; |
97763d0e JM |
40 | var iterations; |
41 | ||
42 | function message(str) { | |
43 | console.log(str); | |
e4671910 | 44 | cell = $D('messages'); |
97763d0e JM |
45 | cell.innerHTML += msg_cnt + ": " + str + "\n"; |
46 | cell.scrollTop = cell.scrollHeight; | |
da6dd893 | 47 | msg_cnt += 1; |
97763d0e JM |
48 | } |
49 | ||
d93d3e09 | 50 | function test_functions () { |
ac99a1f7 JM |
51 | var img, x, y, w, h, ctx = display.get_context(); |
52 | w = display.get_width(); | |
53 | h = display.get_height(); | |
54 | display.fillRect(0, 0, w, h, [240,240,240]); | |
d93d3e09 | 55 | |
ac99a1f7 | 56 | display.blitStringImage("data:image/png;base64," + face64, 150, 10); |
97763d0e | 57 | |
97763d0e | 58 | var himg = new Image(); |
d93d3e09 | 59 | himg.onload = function () { |
8db09746 | 60 | ctx.drawImage(himg, 200, 40); }; |
d93d3e09 | 61 | himg.src = "face.png"; |
97763d0e JM |
62 | |
63 | /* Test array image data */ | |
d93d3e09 | 64 | data = []; |
97763d0e JM |
65 | for (y=0; y< 50; y++) { |
66 | for (x=0; x< 50; x++) { | |
d93d3e09 JM |
67 | data[(y*50 + x)*4 + 0] = 255 - parseInt((255 / 50) * y, 10); |
68 | data[(y*50 + x)*4 + 1] = parseInt((255 / 50) * y, 10); | |
69 | data[(y*50 + x)*4 + 2] = parseInt((255 / 50) * x, 10); | |
70 | data[(y*50 + x)*4 + 3] = 255; | |
97763d0e JM |
71 | } |
72 | } | |
ac99a1f7 | 73 | display.blitImage(30, 10, 50, 50, data, 0); |
d93d3e09 | 74 | |
ac99a1f7 JM |
75 | img = display.getTile(5,5,16,16,[0,128,128]); |
76 | display.putTile(img); | |
d93d3e09 | 77 | |
ac99a1f7 JM |
78 | img = display.getTile(90,15,16,16,[0,0,0]); |
79 | display.setSubTile(img, 0,0,16,16,[128,128,0]); | |
80 | display.putTile(img); | |
97763d0e JM |
81 | } |
82 | ||
d93d3e09 | 83 | function begin () { |
e4671910 JM |
84 | $D('startButton').value = "Running"; |
85 | $D('startButton').disabled = true; | |
97763d0e | 86 | setTimeout(start_delayed, 250); |
e4671910 | 87 | iterations = $D('iterations').value; |
97763d0e JM |
88 | } |
89 | ||
90 | function start_delayed () { | |
8db09746 JM |
91 | var ret; |
92 | ||
ac99a1f7 | 93 | ret = display.set_prefer_js(true); |
8db09746 JM |
94 | if (ret) { |
95 | message("Running test: prefer Javascript ops"); | |
96 | var time1 = run_test(); | |
97 | message("prefer Javascript ops: " + time1 + "ms total, " + | |
98 | (time1 / iterations) + "ms per frame"); | |
99 | } else { | |
100 | message("Could not run: prefer Javascript ops"); | |
101 | } | |
97763d0e | 102 | |
ac99a1f7 | 103 | display.set_prefer_js(false); |
97763d0e | 104 | message("Running test: prefer Canvas ops"); |
97763d0e JM |
105 | var time2 = run_test(); |
106 | message("prefer Canvas ops: " + time2 + "ms total, " + | |
107 | (time2 / iterations) + "ms per frame"); | |
108 | ||
005d9ee9 | 109 | if (Util.get_logging() !== 'debug') { |
ac99a1f7 | 110 | display.resize(start_width, start_height, true); |
005d9ee9 JM |
111 | test_functions(); |
112 | } | |
e4671910 JM |
113 | $D('startButton').disabled = false; |
114 | $D('startButton').value = "Do Performance Test"; | |
97763d0e JM |
115 | } |
116 | ||
117 | function run_test () { | |
d93d3e09 | 118 | var width, height; |
e4671910 JM |
119 | width = $D('width').value; |
120 | height = $D('height').value; | |
ac99a1f7 | 121 | display.resize(width, height); |
d93d3e09 | 122 | var color, start_time = (new Date()).getTime(), w, h; |
97763d0e JM |
123 | for (var i=0; i < iterations; i++) { |
124 | color = [128, 128, (255 / iterations) * i, 0]; | |
125 | for (var x=0; x < width; x = x + 16) { | |
d93d3e09 JM |
126 | for (var y=0; y < height; y = y + 16) { |
127 | w = Math.min(16, width - x); | |
128 | h = Math.min(16, height - y); | |
ac99a1f7 JM |
129 | var tile = display.getTile(x, y, w, h, color); |
130 | display.setSubTile(tile, 0, 0, w, h, color); | |
131 | display.putTile(tile); | |
97763d0e JM |
132 | } |
133 | } | |
134 | } | |
135 | var end_time = (new Date()).getTime(); | |
136 | return (end_time - start_time); | |
137 | } | |
138 | ||
b92e282a | 139 | window.onload = function() { |
da6dd893 | 140 | message("in onload"); |
e4671910 | 141 | $D('iterations').value = 10; |
ac99a1f7 JM |
142 | display = new Display({'target' : $D('canvas')}); |
143 | display.resize(start_width, start_height, true); | |
97763d0e | 144 | message("Canvas initialized"); |
d93d3e09 | 145 | test_functions(); |
b92e282a JM |
146 | } |
147 | </script> | |
148 | </html> |