Added canvas perf demo for whatwg.
[WebKit.git] / WebKitSite / demos / canvas-perf / canvas.html
1 <!DOCTYPE html>
2 <body onload="doTest()">
3 <pre id="output">
4 </pre>
5 <img src="kraken.jpg" id="image">
6 <canvas id="original" width=3264 height=2448 style="width: 3264px; height: 2448px"></canvas>
7 <canvas id="copy" width=3264 height=2448 style="width: 3264px; height: 2448px"></canvas>
8 <canvas id="scaledUp" width=6528 height=4896 style="width: 6528px; height: 4896px"></canvas>
9 <canvas id="scaledDown" width=1632 height=1224 style="width: 1632px; height: 1224px"></canvas>
10 <canvas id="rotated" width=2448 height=3264 style="width: 2448px; height: 3264px; border: 1px solid red;"></canvas>
11 <script>
12 function doTest() {
13     var output = document.getElementById("output");
14     var image =  document.getElementById("image");
15     var original =  document.getElementById("original");
16
17     var copy =  document.getElementById("copy");
18     var scaledUp =  document.getElementById("scaledUp");
19     var scaledDown =  document.getElementById("scaledDown");
20     var rotated = document.getElementById("rotated");
21
22     original.getContext("2d").drawImage(image, 0, 0);
23
24     var startDate = new Date();
25     
26     var copyContext = copy.getContext("2d");
27     for (var i = 0; i < 2; ++i) {
28         copyContext.drawImage(original, 0, 0);
29     }
30
31     var time = (new Date()) - startDate;
32     output.innerHTML += "Direct image copy: " + (time/2) + "ms<br>";
33
34     startDate = new Date();
35     
36     var originalContext = copy.getContext("2d");
37     for (var i = 0; i < 2; ++i) {
38         var imageData = originalContext.getImageData(0, 0, 3264, 2448);
39         copyContext.putImageData(imageData, 0, 0);
40     }
41
42     time = (new Date()) - startDate;
43     output.innerHTML += "Indirect copy with (via ImageData): " + (time/2) + "ms<br>";
44
45     startDate = new Date();
46     
47     var scaledUpContext = scaledUp.getContext("2d");
48     for (var i = 0; i < 2; ++i) {
49         scaledUpContext.drawImage(original, 0, 0, 6528, 4896);
50     }
51
52     time = (new Date()) - startDate;
53     output.innerHTML += "Copy with 2x scale: " + (time/2) + "ms<br>";
54
55     startDate = new Date();
56     var scaledDownContext = scaledDown.getContext("2d");
57     for (var i = 0; i < 2; ++i) {
58         scaledDownContext.drawImage(original, 0, 0, 1632, 1224);
59     }
60
61     time = (new Date()) - startDate;
62     output.innerHTML += "Copy with 0.5x scale: " + (time/2) + "ms<br>";
63
64     startDate = new Date();
65     var rotatedContext = rotated.getContext("2d");
66     rotatedContext.rotate(Math.PI / 2);
67
68     for (var i = 0; i < 2; ++i) {
69         rotatedContext.drawImage(original, 0, -original.height);
70     }
71
72     time = (new Date()) - startDate;
73     output.innerHTML += "Copy with rotate:" + (time/2) + "ms<br>";
74 }
75 </script>
76
77 </body>