Project

General

Profile

canvas_resize_copy_bits_test_20150812.html

Greg Shah, 08/12/2015 01:38 PM

Download (3.4 KB)

 
1 
<!DOCTYPE html>
2 
<html lang="en">
3 
   <head>
4 
      <meta charset="utf-8" />
5 
      <title>Canvas Resize 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 addDoubleClick(canvas, ctx)
54 
         {
55 
            canvas.addEventListener('dblclick', function(e)
56 
            {
57 
               // save off previous drawing results
58 
               var oldPixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
59
60 
               // resize the current canvas
61 
               canvas.width  = canvas.width == 180 ? 220 : 180;
62 
               canvas.height = canvas.height == 100 ? 140 : 100;
63
64 
               // pause here
65 
               alert("After resize but before restore of old pixel data.");
66
67 
               // restore previous drawing results
68 
               ctx.putImageData(oldPixels, 0, 0);
69
70 
               // pause here
71 
               alert("After old pixel data but before redraw.");
72
73 
               // redraw and now it is back
74 
               redraw(canvas, ctx);
75 
            }, true);
76 
         }
77
78 
         window.onload=function()
79 
         {
80 
            canvas1 = document.getElementById("bogus1");
81 
            ctx1 = canvas1.getContext('2d');
82
83 
            canvas2 = document.getElementById("bogus2");
84 
            ctx2 = canvas2.getContext('2d');
85
86 
            initCanvas(canvas1, ctx1, 20, 20, 180, 100, "#000000", "One");
87 
            initCanvas(canvas2, ctx2, 210, 20, 180, 100, "#00FF00", "Two");
88
89 
            redraw(canvas1, ctx1);
90 
            redraw(canvas2, ctx2);
91
92 
            addDoubleClick(canvas1, ctx1);
93 
            addDoubleClick(canvas2, ctx2);
94 
         };
95 
      </script>
96 
   </head>
97 
   <body>
98 
      <canvas id="bogus1" style="position:absolute; z-index:10">No HTML5 support in your browser!</canvas>
99 
      <canvas id="bogus2" style="position:absolute; z-index:20">No HTML5 support in your browser!</canvas>
100 
   </body>
101 
</html>