git @ Cat's Eye Technologies The-Dipple / 5425f2d
Add "Hanging a Canvas" demonstration. --HG-- rename : javascript/full-browser-canvas-w-header.html => javascript/hanging-a-canvas.html Chris Pressey 10 years ago
2 changed file(s) with 73 addition(s) and 48 deletion(s). Raw diff Collapse all Expand all
+0
-48
javascript/full-browser-canvas-w-header.html less more
0 <!DOCTYPE html>
1 <head>
2 <meta charset="utf-8">
3 <title>Full Browser Canvas with Header</title>
4 <style>
5 html, body, header, article, canvas {
6 width: 100%;
7 margin: 0;
8 padding: 0;
9 line-height: 0; /* this is important - removes gap at bottom */
10 }
11 header {
12 line-height: 28px;
13 }
14 h1 {
15 margin: 0;
16 padding: 0;
17 }
18 html, body {
19 height: 100%;
20 }
21 </style>
22 </head>
23 <body>
24 <header>
25 <h1>Full Browser Canvas with Header</h1>
26 </header>
27 <article>
28 <canvas id="canvas">
29 Your browser doesn't support displaying an HTML5 canvas.
30 </canvas>
31 </article>
32 </body>
33 <script>
34 var draw = function() {
35 var canvas = document.getElementById('canvas');
36 canvas.width = canvas.clientWidth;
37 canvas.height = canvas.clientHeight;
38 var ctx = canvas.getContext('2d');
39 ctx.fillStyle = 'red';
40 ctx.fillRect(0, 0, canvas.width / 2, canvas.height / 2);
41 ctx.fillStyle = 'blue';
42 ctx.fillRect(canvas.width / 2, canvas.height / 2, canvas.width, canvas.height);
43 };
44
45 window.onload = draw;
46 window.onresize = draw;
47 </script>
+73
-0
javascript/hanging-a-canvas.html less more
0 <!DOCTYPE html>
1 <head>
2 <meta charset="utf-8">
3 <title>Hanging a Canvas</title>
4 <style>
5 header {
6 background: goldenrod;
7 }
8 article {
9 width: 100%;
10 text-align: center;
11 }
12 </style>
13 </head>
14 <body>
15 <header>
16 <h1>Hanging a Canvas</h1>
17 <i></i>
18 </header>
19 <article>
20 <canvas id="canvas">
21 Your browser doesn't support displaying an HTML5 canvas.
22 </canvas>
23 </article>
24 </body>
25 <script>
26 var resizeCanvas = function() {
27 var desiredWidth = 640;
28 var desiredHeight = 400;
29 var rect = canvas.parentElement.getBoundingClientRect();
30 var absTop = Math.round(rect.top + window.pageYOffset);
31 var absLeft = Math.round(rect.left + window.pageXOffset);
32 var html = document.documentElement;
33 var availWidth = html.clientWidth - absLeft * 2;
34 var availHeight = html.clientHeight - (absTop + absLeft * 2);
35 var widthFactor = desiredWidth / availWidth;
36 var heightFactor = desiredHeight / availHeight;
37 var scale = 1 / Math.max(widthFactor, heightFactor);
38
39 // If you don't mind expanding the canvas, you can leave out
40 // this scale-clipping guard. The aspect ratio will still be preserved.
41 scale = scale > 1 ? 1 : scale;
42
43 var newWidth = Math.trunc(desiredWidth * scale);
44 var newHeight = Math.trunc(desiredHeight * scale);
45 if (canvas.width !== newWidth || canvas.height !== newHeight) {
46 canvas.width = newWidth;
47 canvas.height = newHeight;
48 // and redraw
49 var ctx = canvas.getContext('2d');
50 ctx.fillStyle = 'red';
51 ctx.fillRect(0, 0, canvas.width / 2, canvas.height / 2);
52 ctx.fillStyle = 'blue';
53 ctx.fillRect(canvas.width / 2, canvas.height / 2, canvas.width, canvas.height);
54 }
55
56 // If you want to center the canvas vertically, here's one way:
57 // figure out how much space you have available below it, and give
58 // the canvas a top-margin of 1/2 that.
59 if (availHeight > canvas.height) {
60 canvas.style.marginTop = Math.round((availHeight - canvas.height) / 2) + "px";
61 }
62
63 document.getElementsByTagName('i')[0].innerHTML = (
64 '(available: ' + availWidth + 'x' + availHeight + ', ' +
65 'scale: ' + scale + ', ' +
66 'result: ' + canvas.width + 'x' + canvas.height + ')'
67 );
68 };
69
70 window.addEventListener("load", resizeCanvas);
71 window.addEventListener("resize", resizeCanvas);
72 </script>