Project

General

Profile

canvas_resize_move_zorder_test_20150814.html

Greg Shah, 08/14/2015 02:39 PM

Download (4.59 KB)

 
1 
<!DOCTYPE html>
2 
<html lang="en">
3 
   <head>
4 
      <meta charset="utf-8" />
5 
      <title>Canvas Resize/Move/Z-Order Copy Bits Test</title>
6
7 
      <script>
8 
         var canvas1;
9 
         var canvas2;
10
11 
         var ctx1;
12 
         var ctx2;
13
14 
         function initCanvas(canvas, ctx, x, y, width, height, color, text)
15 
         {
16 
            canvas.style.top = y.toString() + "px";
17 
            canvas.style.left = x.toString() + "px";
18 
            canvas.width = width;
19 
            canvas.height = height;
20
21 
            ctx.lineWidth = 1;
22 
            ctx.imageSmoothingEnabled = false;
23 
            ctx.translate(0.5, 0.5);
24
25 
            ctx.savedFillColor = color;
26 
            ctx.savedText = text;
27 
         }
28
29 
         function redraw(canvas, ctx)
30 
         {
31 
            var oldFillColor  = ctx.fillStyle;
32 
            var oldStrokeColor = ctx.strokeStyle;
33
34 
            // draw background
35 
            ctx.fillStyle   = "#EEEEEE";
36 
            ctx.fillRect(0, 0, canvas.width, canvas.height);
37
38 
            ctx.fillStyle = ctx.savedFillColor;
39 
            ctx.strokeStyle = ctx.savedFillColor;
40
41 
            ctx.strokeRect(1, 1, canvas.width - 2, canvas.height - 2);
42 
            ctx.fillRect(40, 40, 100, 40);
43
44 
            // reset to default color
45 
            ctx.fillStyle = "#000000";
46
47 
            ctx.fillText(ctx.savedText, 80, 20, 100);
48
49 
            ctx.fillStyle = oldFillColor;
50 
            ctx.strokeStyle = oldStrokeColor;
51 
         }
52
53 
         function moveCanvas1()
54 
         {
55 
            canvas1.style.top  = (canvas1.style.top === "20px") ? "100px" : "20px";
56 
         }
57
58 
         function moveCanvas2()
59 
         {
60 
            canvas2.style.top  = (canvas2.style.top === "20px") ? "100px" : "20px";
61 
         }
62
63 
         function swapZOrder()
64 
         {
65 
            var curZ1 = canvas1.style.zIndex;
66 
            var curZ2 = canvas2.style.zIndex;
67
68 
            canvas1.style.zIndex = curZ2;
69 
            canvas2.style.zIndex = curZ1;
70 
         }
71
72 
         function resizeCanvas1()
73 
         {
74 
            resize(canvas1, ctx1);
75 
         }
76
77 
         function resizeCanvas2()
78 
         {
79 
            resize(canvas2, ctx2);
80 
         }
81
82 
         function resize(canvas, ctx)
83 
         {
84 
            // save off previous drawing results
85 
            var oldPixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
86
87 
            // resize the current canvas
88 
            canvas.width  = canvas.width == 180 ? 220 : 180;
89 
            canvas.height = canvas.height == 100 ? 140 : 100;
90
91 
            // pause here
92 
            alert("After resize but before restore of old pixel data.");
93
94 
            // restore previous drawing results
95 
            ctx.putImageData(oldPixels, 0, 0);
96
97 
            // pause here
98 
            alert("After old pixel data but before redraw.");
99
100 
            // redraw and now it is back
101 
            redraw(canvas, ctx);
102 
         }
103
104 
         window.onload = function()
105 
         {
106 
            document.oncontextmenu = function()
107 
            {
108 
               return false;
109 
            };
110
111 
            canvas1 = document.getElementById("bogus1");
112 
            ctx1 = canvas1.getContext('2d');
113
114 
            canvas2 = document.getElementById("bogus2");
115 
            ctx2 = canvas2.getContext('2d');
116
117 
            initCanvas(canvas1, ctx1, 20, 20, 180, 100, "#000000", "One");
118 
            initCanvas(canvas2, ctx2, 210, 20, 180, 100, "#00FF00", "Two");
119
120 
            redraw(canvas1, ctx1);
121 
            redraw(canvas2, ctx2);
122 
         };
123 
      </script>
124 
   </head>
125 
   <body>
126 
      <canvas id="bogus1" style="position:absolute; z-index:10">No HTML5 support in your browser!</canvas>
127 
      <canvas id="bogus2" style="position:absolute; z-index:20">No HTML5 support in your browser!</canvas>
128 
      <div style="position:absolute;top:300px;left:10px;visibility:true">
129 
         <button style="position:relative" onclick="moveCanvas1()">Move Canvas "One"</button>
130 
         <button style="position:relative" onclick="moveCanvas2()">Move Canvas "Two"</button>
131 
         <button style="position:relative" onclick="swapZOrder()">Swap Z-Order</button>
132 
         <button style="position:relative" onclick="resizeCanvas1()">Resize Canvas "One"</button>
133 
         <button style="position:relative" onclick="resizeCanvas2()">Resize Canvas "Two"</button>
134 
      </div>
135 
   </body>
136 
</html>