39823f49e2512cdd9054d266f6bd31d287f798ba
[WebKit-https.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 copyContext = copy.getContext("2d");
25     var originalContext = original.getContext("2d");
26     var scaledUpContext = scaledUp.getContext("2d");
27     var scaledDownContext = scaledDown.getContext("2d");
28     var rotatedContext = rotated.getContext("2d");
29
30     var startDate = new Date();
31     
32     copyContext.globalCompositeOperation = "copy";
33     for (var i = 0; i < 2; ++i) {
34         copyContext.drawImage(original, 0, 0);
35     }
36
37     var time = (new Date()) - startDate;
38     output.innerHTML += "Direct image copy: " + (time/2) + "ms<br>";
39
40     startDate = new Date();
41     
42     for (var i = 0; i < 2; ++i) {
43         var imageData = originalContext.getImageData(0, 0, 3264, 2448);
44         copyContext.putImageData(imageData, 0, 0);
45     }
46
47     time = (new Date()) - startDate;
48     output.innerHTML += "Indirect copy with (via ImageData): " + (time/2) + "ms<br>";
49
50     startDate = new Date();
51     
52     scaledUpContext.globalCompositeOperation = "copy";
53     for (var i = 0; i < 2; ++i) {
54         scaledUpContext.drawImage(original, 0, 0, 6528, 4896);
55     }
56
57     time = (new Date()) - startDate;
58     output.innerHTML += "Copy with 2x scale: " + (time/2) + "ms<br>";
59
60     startDate = new Date();
61     scaledDownContext.globalCompositeOperation = "copy";
62     for (var i = 0; i < 2; ++i) {
63         scaledDownContext.drawImage(original, 0, 0, 1632, 1224);
64     }
65
66     time = (new Date()) - startDate;
67     output.innerHTML += "Copy with 0.5x scale: " + (time/2) + "ms<br>";
68
69     startDate = new Date();
70     rotatedContext.globalCompositeOperation = "copy";
71     rotatedContext.rotate(Math.PI / 2);
72
73     for (var i = 0; i < 2; ++i) {
74         rotatedContext.drawImage(original, 0, -original.height);
75     }
76
77     time = (new Date()) - startDate;
78     output.innerHTML += "Copy with rotate:" + (time/2) + "ms<br>";
79 }
80 </script>
81
82 </body>