-
Notifications
You must be signed in to change notification settings - Fork 23
/
index.html
202 lines (188 loc) · 8.32 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
<!DOCTYPE html>
<html lang="en">
<head>
<title>CanvasMark 2013 - HTML5 Canvas 2D Rendering and JavaScript Benchmark</title>
<script src="scripts/mathlib-min.js"></script>
<script src="scripts/k3d-min.js"></script>
<script src="scripts/canvasmark_v6.js"></script>
<script async defer src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script async defer src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4e4813104686cad8"></script>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,800' rel='stylesheet' type='text/css'>
<style type="text/css">
@font-face
{
font-family: OstrichSans;
src: url('ostrich-black-webfont.woff');
}
body
{
background-color: #aaa;
font-family: 'Open Sans', Helvetica;
color: #333;
}
.title
{
font-family: OstrichSans, Helvetica;
padding-left: 20px;
padding-top: 6px;
color: #000;
font-size: 1.75em;
}
P
{
font-size: 1em;
padding-left: 20px;
padding-top: 0;
padding-bottom: 0;
line-height: 1.5em;
}
P.left
{
padding-left: 2em;
}
a, a:visited, a:active, a:hover
{
color: #225588;
text-decoration: none;
}
a:hover
{
text-decoration: underline;
}
.box-shadow
{
box-shadow: 0px 3px 16px #222;
}
.wrapper
{
padding-top: 12px;
text-align: center;
}
.info
{
display: inline-block;
margin-left: 1.5em;
text-align: left;
vertical-align: top;
}
.infopanel
{
background-color: #F0F0FF;
display: inline-block;
line-height: 2em;
padding: 1.5em;
width: 28em;
}
canvas
{
border: 1px solid #333;
background-color: #000;
}
.results
{
}
.results-wrapper
{
display: none;
border: 1px solid #aaa;
background-color: #ddd;
margin-left: 1em;
}
.prose
{
font-family: 'Open Sans', Helvetica;
font-size: 0.85em;
line-height: 1.4em;
}
.footer
{
margin-top: 16px;
text-align: center;
}
.small
{
background-color: #eee;
display: inline-block;
font-family: 'Open Sans', Helvetica;
font-weight: 300;
font-size: 0.85em;
padding: 6px 12px;
text-align: center;
}
.button-overlay
{
position: absolute;
right: 1em;
bottom: 1em;
}
.toggle-area
{
display: none;
}
a.toggler,
a.toggler:visited,
a.toggler:hover,
a.toggler:active
{
text-decoration: none !important;
}
</style>
<meta name="description" content="CanvasMark - HTML5 Canvas 2D Rendering and JavaScript Benchmark by Kevin Roast" />
</head>
<body>
<a href="https://github.com/kevinroast"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://github-camo.global.ssl.fastly.net/e7bbb0521b397edbd5fe43e7f760759336b5e05f/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677265656e5f3030373230302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_green_007200.png"></a>
<div class="button-overlay">
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<!-- AddThis Button END -->
</div>
<div class="wrapper">
<canvas class="box-shadow" id="canvas" width="640" height="640"></canvas>
<div class="info">
<div class="infopanel">
<div class="title">CanvasMark 2013 - HTML5 Canvas 2D Rendering and JavaScript Benchmark</div>
<div>
<p>Tests the HTML5 <canvas> rendering performance for commonly used operations in HTML5 games: bitmaps, canvas drawing, alpha blending, polygon fills, shadows and text functions.</p>
</div>
<div id="results-wrapper" class="results-wrapper">
<div class="results" id="results"></div>
<div class="results"><p><a id="tweetlink" href="#" target="new">Tweet this result.</a></p></div>
</div>
<div>
<p>Run benchmark using HTML5 compatible browser: <a href="http://www.google.co.uk/chrome" target="new">Chrome</a> | <a href="http://www.mozilla.com/firefox" target="new">FireFox</a> | <a href="http://www.apple.com/safari/download" target="new">Safari</a> | <a href="http://www.opera.com/download" target="new">Opera</a> | <a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home" target="new">IE9/10</a>.</p>
</div>
<div>
<p>This benchmark suite uses a number of elements from my HTML5 games including <a href="../asteroids">Asteroids</a> and <a href="../arena5">Arena5</a>. See more <a href="../index.html">HTML5 Canvas experiments</a>.</p>
</div>
<div>
<p class="prose">Important notes for Windows + Chrome users! <a class="toggler" title="More..." href="#" onclick="$('#toggle-1').toggle();return false;">[+]</a>
<span id="toggle-1" class="toggle-area"><br>To get the best benchmark score for your machine, it is advisable to Disable VSync. Go to "about:flags" and toggle: <code>Disable GPU VSync "Disables synchronisation with the display's vertical refresh rate when GPU rendering."</code> This will resolve the issue with the Chrome implementation of "requestAnimationFrame()" that tries to maintain a steady 60 frames-per-second (FPS) but on Windows with accelerated 2D canvas support, it will drop immediately down to 30 FPS when 60 FPS is not achievable with no gradual degredation. On Mac/Linux the drop in FPS is gradual and therefore does not affect the benchmark. So if you see the FPS counter drop directly from around 60 FPS to 30 FPS then you should do this. This will not produce an "unfair" score as scores are based on time not the number of frames generated.</span>
</p>
</div>
<div>
<p class="prose">How to interpret the results <a class="toggler" title="More..." href="#" onclick="$('#toggle-2').toggle();return false;">[+]</a>
<span id="toggle-2" class="toggle-area"><br>CanvasMark gives a score for the browser based on the combined performance in each of the various stress tests. You should ensure the browser window is not minimized and that no other CPU or GPU intensive processes are running during the test. The results can only be compared to other browsers running on the same machine - as each machine with different CPU or graphics will produce difference results.</span>
</p>
</div>
<div>
<p class="prose">How does it work <a class="toggler" title="More..." href="#" onclick="$('#toggle-3').toggle();return false;">[+]</a>
<span id="toggle-3" class="toggle-area"><br>Each test is run and progressively tuned to stress the browser until a steady 30 frames-per-second (FPS) is reached. More objects are added to the scene or the scene is made more complex to render until that point is reached. Then the test is considered completed and the next test is started. The score is based on the length of time the browser was able to maintain the test scene at greater than 30 FPS, multiplied by a weighting for the complexity of each test type.</span>
</p>
</div>
<div>
<p class="prose">Benchmark version 1.1 [25-03-2013]</p>
<p class="prose">Source code now available on <a href="https://github.com/kevinroast/CanvasMark">GitHub</a>.</p>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="small">Follow CanvasMark <a href="http://twitter.com/canvasbench" target="new">on Twitter</a> or just <a href="http://twitter.com/home/?status=CanvasMark%20-%20HTML5%20Canvas%20performance%20and%20benchmarking%20tool:%20http://bit.ly/canvasmark%20%23javascript%20%23html5%20(@canvasbench)" target="new">Tweet this.</a> Last updated: 25th March 2013 by Kevin Roast</div>
</div>
</body>
</html>