OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <html> | 2 <html> |
3 <body> | 3 <body> |
4 <script src="../resources/runner.js"></script> | 4 <script src="../resources/runner.js"></script> |
5 <script> | 5 <script> |
6 var sourceCanvas2D = document.createElement("canvas"); | 6 var sourceCanvas2D = document.createElement("canvas"); |
7 var sourceCtx2D = sourceCanvas2D.getContext("2d"); | 7 var sourceCtx2D = sourceCanvas2D.getContext("2d"); |
8 var destCanvas2D = document.createElement("canvas"); | 8 var destCanvas2D = document.createElement("canvas"); |
9 var destCtx2D = destCanvas2D.getContext("2d"); | 9 var destCtx2D = destCanvas2D.getContext("2d"); |
10 var MEASURE_DRAW_TIMES = 1000; | 10 var MEASURE_DRAW_TIMES = 50; |
11 var MAX_COUNT = 60000; | 11 var MAX_MEASURE_DRAW_TIMES = 1000; |
12 var count = 0; | 12 var MAX_MEASURE_TIME_PER_FRAME = 1000; // 1 sec |
13 | 13 |
14 function setSize(sourceWidth, sourceHeight, destWidth, destHeight) { | 14 function setSize(sourceWidth, sourceHeight, destWidth, destHeight) { |
15 sourceCanvas2D.width = sourceWidth; | 15 sourceCanvas2D.width = sourceWidth; |
16 sourceCanvas2D.height = sourceHeight; | 16 sourceCanvas2D.height = sourceHeight; |
17 destCanvas2D.width = destWidth; | 17 destCanvas2D.width = destWidth; |
18 destCanvas2D.height = destHeight; | 18 destCanvas2D.height = destHeight; |
19 } | 19 } |
20 | 20 |
21 function rand(range) { | 21 function rand(range) { |
22 return Math.floor(Math.random() * range); | 22 return Math.floor(Math.random() * range); |
23 } | 23 } |
24 | 24 |
25 function fillCanvas(ctx2d, canvas2d) { | 25 function fillCanvas(ctx2d, canvas2d) { |
26 ctx2d.fillStyle = "rgba(" + rand(255) + "," + rand(255) + "," + rand(255) +
"," + rand(255) + ")"; | 26 ctx2d.fillStyle = "rgba(" + rand(255) + "," + rand(255) + "," + rand(255) +
"," + rand(255) + ")"; |
27 ctx2d.fillRect(0, 0, canvas2d.width, canvas2d.height); | 27 ctx2d.fillRect(0, 0, canvas2d.width, canvas2d.height); |
28 } | 28 } |
29 | 29 |
30 function drawCanvas2DToCanvas2D() { | 30 function drawCanvas2DToCanvas2D() { |
31 var start = PerfTestRunner.now(); | 31 var start = PerfTestRunner.now(); |
32 for (var i = 0; i < MEASURE_DRAW_TIMES; i++) { | 32 var count = 0; |
33 // draw static Canvas | 33 while ((PerfTestRunner.now() - start <= MAX_MEASURE_TIME_PER_FRAME) && (coun
t * MEASURE_DRAW_TIMES < MAX_MEASURE_DRAW_TIMES)) { |
34 destCtx2D.drawImage(sourceCanvas2D, 0, 0); | 34 for (var i = 0; i < MEASURE_DRAW_TIMES; i++) { |
| 35 // draw static Canvas |
| 36 destCtx2D.drawImage(sourceCanvas2D, 0, 0); |
| 37 } |
| 38 count++; |
35 } | 39 } |
36 // Calling getImageData() is just to flush out the content when | 40 // Calling getImageData() is just to flush out the content when |
37 // accelerated 2D canvas is in use. The cost of reading 1x1 pixels is low. | 41 // accelerated 2D canvas is in use. The cost of reading 1x1 pixels is low. |
38 destCtx2D.getImageData(0, 0, 1, 1); | 42 destCtx2D.getImageData(0, 0, 1, 1); |
39 count++; | |
40 | 43 |
41 var elapsedTime = PerfTestRunner.now() - start; | 44 var elapsedTime = PerfTestRunner.now() - start; |
42 PerfTestRunner.measureValueAsync(MEASURE_DRAW_TIMES * 1000 / elapsedTime); | 45 PerfTestRunner.measureValueAsync(MEASURE_DRAW_TIMES * count * 1000 / elapsed
Time); |
43 if (count < MAX_COUNT) | 46 |
44 requestAnimationFrame(drawCanvas2DToCanvas2D); | 47 requestAnimationFrame(drawCanvas2DToCanvas2D); |
45 } | 48 } |
46 | 49 |
47 function onCompletedRun() { | 50 function onCompletedRun() { |
48 count = MAX_COUNT; | |
49 } | 51 } |
50 | 52 |
51 window.onload = function () { | 53 window.onload = function () { |
52 PerfTestRunner.prepareToMeasureValuesAsync({done: onCompletedRun, unit: 'run
s/s', | 54 PerfTestRunner.prepareToMeasureValuesAsync({done: onCompletedRun, unit: 'run
s/s', |
53 description: "This bench test checks the speed on drawing static 2d Canv
as(1024x1024) to HW accelerated Canvas2D(1024x1024)."}); | 55 description: "This bench test checks the speed on drawing static 2d Canv
as(1024x1024) to HW accelerated Canvas2D(1024x1024)."}); |
54 // It should use setMinimumAccelerated2dCanvasSize() to enable accelerated C
anvas for a specified size | 56 // It should use setMinimumAccelerated2dCanvasSize() to enable accelerated C
anvas for a specified size |
55 // but this API is not available in JS or WebPage. Assume the threshold size
is 256x257 | 57 // but this API is not available in JS or WebPage. Assume the threshold size
is 256x257 |
56 // and the dest canvas is HW accelerated Canvas when setting its size to 102
4x1024. | 58 // and the dest canvas is HW accelerated Canvas when setting its size to 102
4x1024. |
57 setSize(1024, 1024, 1024, 1024); | 59 setSize(1024, 1024, 1024, 1024); |
58 fillCanvas(sourceCtx2D, sourceCanvas2D); | 60 fillCanvas(sourceCtx2D, sourceCanvas2D); |
59 drawCanvas2DToCanvas2D(); | 61 drawCanvas2DToCanvas2D(); |
60 } | 62 } |
61 | 63 |
62 </script> | 64 </script> |
63 </body> | 65 </body> |
64 </html> | 66 </html> |
OLD | NEW |