├── LICENSE
├── README.md
├── animation.js
├── gain-cpu-time.html
├── google38628efc87e53b4d.html
├── index.html
├── keep-ui-responsive.html
├── style.css
├── threejs-cube.js
├── use-in-worker.html
└── use-with-lib.html


/LICENSE:
--------------------------------------------------------------------------------
  1 |                                  Apache License
  2 |                            Version 2.0, January 2004
  3 |                         http://www.apache.org/licenses/
  4 | 
  5 |    TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
  6 | 
  7 |    1. Definitions.
  8 | 
  9 |       "License" shall mean the terms and conditions for use, reproduction,
 10 |       and distribution as defined by Sections 1 through 9 of this document.
 11 | 
 12 |       "Licensor" shall mean the copyright owner or entity authorized by
 13 |       the copyright owner that is granting the License.
 14 | 
 15 |       "Legal Entity" shall mean the union of the acting entity and all
 16 |       other entities that control, are controlled by, or are under common
 17 |       control with that entity. For the purposes of this definition,
 18 |       "control" means (i) the power, direct or indirect, to cause the
 19 |       direction or management of such entity, whether by contract or
 20 |       otherwise, or (ii) ownership of fifty percent (50%) or more of the
 21 |       outstanding shares, or (iii) beneficial ownership of such entity.
 22 | 
 23 |       "You" (or "Your") shall mean an individual or Legal Entity
 24 |       exercising permissions granted by this License.
 25 | 
 26 |       "Source" form shall mean the preferred form for making modifications,
 27 |       including but not limited to software source code, documentation
 28 |       source, and configuration files.
 29 | 
 30 |       "Object" form shall mean any form resulting from mechanical
 31 |       transformation or translation of a Source form, including but
 32 |       not limited to compiled object code, generated documentation,
 33 |       and conversions to other media types.
 34 | 
 35 |       "Work" shall mean the work of authorship, whether in Source or
 36 |       Object form, made available under the License, as indicated by a
 37 |       copyright notice that is included in or attached to the work
 38 |       (an example is provided in the Appendix below).
 39 | 
 40 |       "Derivative Works" shall mean any work, whether in Source or Object
 41 |       form, that is based on (or derived from) the Work and for which the
 42 |       editorial revisions, annotations, elaborations, or other modifications
 43 |       represent, as a whole, an original work of authorship. For the purposes
 44 |       of this License, Derivative Works shall not include works that remain
 45 |       separable from, or merely link (or bind by name) to the interfaces of,
 46 |       the Work and Derivative Works thereof.
 47 | 
 48 |       "Contribution" shall mean any work of authorship, including
 49 |       the original version of the Work and any modifications or additions
 50 |       to that Work or Derivative Works thereof, that is intentionally
 51 |       submitted to Licensor for inclusion in the Work by the copyright owner
 52 |       or by an individual or Legal Entity authorized to submit on behalf of
 53 |       the copyright owner. For the purposes of this definition, "submitted"
 54 |       means any form of electronic, verbal, or written communication sent
 55 |       to the Licensor or its representatives, including but not limited to
 56 |       communication on electronic mailing lists, source code control systems,
 57 |       and issue tracking systems that are managed by, or on behalf of, the
 58 |       Licensor for the purpose of discussing and improving the Work, but
 59 |       excluding communication that is conspicuously marked or otherwise
 60 |       designated in writing by the copyright owner as "Not a Contribution."
 61 | 
 62 |       "Contributor" shall mean Licensor and any individual or Legal Entity
 63 |       on behalf of whom a Contribution has been received by Licensor and
 64 |       subsequently incorporated within the Work.
 65 | 
 66 |    2. Grant of Copyright License. Subject to the terms and conditions of
 67 |       this License, each Contributor hereby grants to You a perpetual,
 68 |       worldwide, non-exclusive, no-charge, royalty-free, irrevocable
 69 |       copyright license to reproduce, prepare Derivative Works of,
 70 |       publicly display, publicly perform, sublicense, and distribute the
 71 |       Work and such Derivative Works in Source or Object form.
 72 | 
 73 |    3. Grant of Patent License. Subject to the terms and conditions of
 74 |       this License, each Contributor hereby grants to You a perpetual,
 75 |       worldwide, non-exclusive, no-charge, royalty-free, irrevocable
 76 |       (except as stated in this section) patent license to make, have made,
 77 |       use, offer to sell, sell, import, and otherwise transfer the Work,
 78 |       where such license applies only to those patent claims licensable
 79 |       by such Contributor that are necessarily infringed by their
 80 |       Contribution(s) alone or by combination of their Contribution(s)
 81 |       with the Work to which such Contribution(s) was submitted. If You
 82 |       institute patent litigation against any entity (including a
 83 |       cross-claim or counterclaim in a lawsuit) alleging that the Work
 84 |       or a Contribution incorporated within the Work constitutes direct
 85 |       or contributory patent infringement, then any patent licenses
 86 |       granted to You under this License for that Work shall terminate
 87 |       as of the date such litigation is filed.
 88 | 
 89 |    4. Redistribution. You may reproduce and distribute copies of the
 90 |       Work or Derivative Works thereof in any medium, with or without
 91 |       modifications, and in Source or Object form, provided that You
 92 |       meet the following conditions:
 93 | 
 94 |       (a) You must give any other recipients of the Work or
 95 |           Derivative Works a copy of this License; and
 96 | 
 97 |       (b) You must cause any modified files to carry prominent notices
 98 |           stating that You changed the files; and
 99 | 
100 |       (c) You must retain, in the Source form of any Derivative Works
101 |           that You distribute, all copyright, patent, trademark, and
102 |           attribution notices from the Source form of the Work,
103 |           excluding those notices that do not pertain to any part of
104 |           the Derivative Works; and
105 | 
106 |       (d) If the Work includes a "NOTICE" text file as part of its
107 |           distribution, then any Derivative Works that You distribute must
108 |           include a readable copy of the attribution notices contained
109 |           within such NOTICE file, excluding those notices that do not
110 |           pertain to any part of the Derivative Works, in at least one
111 |           of the following places: within a NOTICE text file distributed
112 |           as part of the Derivative Works; within the Source form or
113 |           documentation, if provided along with the Derivative Works; or,
114 |           within a display generated by the Derivative Works, if and
115 |           wherever such third-party notices normally appear. The contents
116 |           of the NOTICE file are for informational purposes only and
117 |           do not modify the License. You may add Your own attribution
118 |           notices within Derivative Works that You distribute, alongside
119 |           or as an addendum to the NOTICE text from the Work, provided
120 |           that such additional attribution notices cannot be construed
121 |           as modifying the License.
122 | 
123 |       You may add Your own copyright statement to Your modifications and
124 |       may provide additional or different license terms and conditions
125 |       for use, reproduction, or distribution of Your modifications, or
126 |       for any such Derivative Works as a whole, provided Your use,
127 |       reproduction, and distribution of the Work otherwise complies with
128 |       the conditions stated in this License.
129 | 
130 |    5. Submission of Contributions. Unless You explicitly state otherwise,
131 |       any Contribution intentionally submitted for inclusion in the Work
132 |       by You to the Licensor shall be under the terms and conditions of
133 |       this License, without any additional terms or conditions.
134 |       Notwithstanding the above, nothing herein shall supersede or modify
135 |       the terms of any separate license agreement you may have executed
136 |       with Licensor regarding such Contributions.
137 | 
138 |    6. Trademarks. This License does not grant permission to use the trade
139 |       names, trademarks, service marks, or product names of the Licensor,
140 |       except as required for reasonable and customary use in describing the
141 |       origin of the Work and reproducing the content of the NOTICE file.
142 | 
143 |    7. Disclaimer of Warranty. Unless required by applicable law or
144 |       agreed to in writing, Licensor provides the Work (and each
145 |       Contributor provides its Contributions) on an "AS IS" BASIS,
146 |       WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
147 |       implied, including, without limitation, any warranties or conditions
148 |       of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
149 |       PARTICULAR PURPOSE. You are solely responsible for determining the
150 |       appropriateness of using or redistributing the Work and assume any
151 |       risks associated with Your exercise of permissions under this License.
152 | 
153 |    8. Limitation of Liability. In no event and under no legal theory,
154 |       whether in tort (including negligence), contract, or otherwise,
155 |       unless required by applicable law (such as deliberate and grossly
156 |       negligent acts) or agreed to in writing, shall any Contributor be
157 |       liable to You for damages, including any direct, indirect, special,
158 |       incidental, or consequential damages of any character arising as a
159 |       result of this License or out of the use or inability to use the
160 |       Work (including but not limited to damages for loss of goodwill,
161 |       work stoppage, computer failure or malfunction, or any and all
162 |       other commercial damages or losses), even if such Contributor
163 |       has been advised of the possibility of such damages.
164 | 
165 |    9. Accepting Warranty or Additional Liability. While redistributing
166 |       the Work or Derivative Works thereof, You may choose to offer,
167 |       and charge a fee for, acceptance of support, warranty, indemnity,
168 |       or other liability obligations and/or rights consistent with this
169 |       License. However, in accepting such obligations, You may act only
170 |       on Your own behalf and on Your sole responsibility, not on behalf
171 |       of any other Contributor, and only if You agree to indemnify,
172 |       defend, and hold each Contributor harmless for any liability
173 |       incurred by, or claims asserted against, such Contributor by reason
174 |       of your accepting any such warranty or additional liability.
175 | 
176 |    END OF TERMS AND CONDITIONS
177 | 
178 |    APPENDIX: How to apply the Apache License to your work.
179 | 
180 |       To apply the Apache License to your work, attach the following
181 |       boilerplate notice, with the fields enclosed by brackets "{}"
182 |       replaced with your own identifying information. (Don't include
183 |       the brackets!)  The text should be enclosed in the appropriate
184 |       comment syntax for the file format. We also recommend that a
185 |       file or class name and description of purpose be included on the
186 |       same "printed page" as the copyright notice for easier
187 |       identification within third-party archives.
188 | 
189 |    Copyright {yyyy} {name of copyright owner}
190 | 
191 |    Licensed under the Apache License, Version 2.0 (the "License");
192 |    you may not use this file except in compliance with the License.
193 |    You may obtain a copy of the License at
194 | 
195 |        http://www.apache.org/licenses/LICENSE-2.0
196 | 
197 |    Unless required by applicable law or agreed to in writing, software
198 |    distributed under the License is distributed on an "AS IS" BASIS,
199 |    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
200 |    See the License for the specific language governing permissions and
201 |    limitations under the License.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # OffscreenCanvas
2 | 
3 | 
4 | [OffscreenCanvas demo set](https://devnook.github.io/OffscreenCanvasDemo/)
5 | 


--------------------------------------------------------------------------------
/animation.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |   Copyright 2018
  3 | 
  4 | Licensed under the Apache License, Version 2.0(the "License");
  5 | you may not use this file except in compliance with the License.
  6 | You may obtain a copy of the License at
  7 | 
  8 | http://www.apache.org/licenses/LICENSE-2.0
  9 | 
 10 | Unless required by applicable law or agreed to in writing, software
 11 | distributed under the License is distributed on an "AS IS" BASIS,
 12 |   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 13 | See the License for the specific language governing permissions and
 14 | limitations under the License.
 15 | 
 16 |   Author: Ewa Gasperowicz(@devnook)
 17 | */
 18 | class Animation {
 19 |   constructor(ctx) {
 20 |     this.ctx = ctx;
 21 |     this.x = ctx.canvas.width / 2;
 22 |     this.y = ctx.canvas.height / 2;
 23 |     this.rMax = Math.min(this.x - 20, this.y - 20, 60);
 24 |     this.r = 40;
 25 |     this.grow = true;
 26 |     this.run = true;
 27 | 
 28 |     this.boundAnimate = this.animate.bind(this);
 29 |   }
 30 | 
 31 |   static fibonacci(num) {
 32 |     return (num <= 1) ? 1 : ThemedAnimation.fibonacci(num - 1) + ThemedAnimation.fibonacci(num - 2);
 33 |   }
 34 | 
 35 |   drawCircle() {
 36 |     this.ctx.beginPath();
 37 |     this.ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI, false);
 38 |     this.ctx.fill();
 39 |   };
 40 | 
 41 |   animate() {
 42 |     if (!this.run) {
 43 |       return;
 44 |     }
 45 |     this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);
 46 |     if (this.r === this.rMax || this.r === 0) {
 47 |       this.grow = !this.grow;
 48 |     };
 49 |     this.r = this.grow ? this.r + 1 : this.r - 1;
 50 |     this.drawCircle();
 51 |     requestAnimationFrame(this.boundAnimate);
 52 |   }
 53 | 
 54 |   stop() {
 55 |     this.run = false;
 56 |   }
 57 | 
 58 |   start() {
 59 |     this.run = true;
 60 |     this.animate();
 61 |   }
 62 | }
 63 | 
 64 | class ThemedAnimation extends Animation {
 65 |   constructor(ctx) {
 66 |     super(ctx);
 67 |     this.counter = 1;
 68 |     this.themeColors = ['red', 'gold'];
 69 |     this.theme = this.themeColors;
 70 |   }
 71 | 
 72 |   set theme(colors) {
 73 |     Animation.fibonacci(40);
 74 |     const ctx = new OffscreenCanvas(100, 1).getContext('2d');
 75 |     const gradient = ctx.createLinearGradient(0, 0, ctx.canvas.width, 0);
 76 |     gradient.addColorStop(0, colors[0]);
 77 |     gradient.addColorStop(0.5, colors[1]);
 78 |     gradient.addColorStop(1, colors[0]);
 79 |     ctx.fillStyle = gradient;
 80 |     ctx.fillRect(0, 0, ctx.canvas.width, 1);
 81 |     const imgd = ctx.getImageData(0, 0, ctx.canvas.width, 1);
 82 |     const theme = [].slice.call(imgd.data);
 83 |     this.theme_ = theme;
 84 |   }
 85 | 
 86 |   get theme() {
 87 |     return this.theme_;
 88 |   }
 89 | 
 90 |   changeColor(counter) {
 91 |     let colorCounter = counter % 100;
 92 |     let pixArr = this.theme.slice(colorCounter * 4, colorCounter * 4 + 4);
 93 |     let color = `rgba(${pixArr[0]}, ${pixArr[1]}, ${pixArr[2]}, ${pixArr[3]} )`;
 94 |     this.ctx.fillStyle = color;
 95 |   }
 96 | 
 97 |   animate() {
 98 |     this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);
 99 |     if (!this.run) {
100 |       return;
101 |     }
102 |     if (this.r === this.rMax || this.r === 0) {
103 |       this.grow = !this.grow;
104 |     };
105 |     if (this.r === 1 && this.grow === false) {
106 |       this.ctx.fillText('Preparing theme... Thread busy', this.x - 60, this.ctx.canvas.height - 10);
107 |     } else {
108 |       this.ctx.fillText('UI interactive', this.x - 30, this.ctx.canvas.height - 10);
109 |     }
110 |     if (this.r === 0 && this.grow) {
111 |       this.themeColors = (this.themeColors[0] === 'red') ? ['blue', 'green'] : ['red', 'gold'];
112 |       this.theme = this.themeColors;
113 |     };
114 |     this.changeColor(this.counter);
115 |     this.counter++;
116 | 
117 |     this.r = this.grow ? this.r + 1 : this.r - 1;
118 | 
119 |     this.drawCircle();
120 |     requestAnimationFrame(this.boundAnimate);
121 |   }
122 | }
123 | 


--------------------------------------------------------------------------------
/gain-cpu-time.html:
--------------------------------------------------------------------------------
 1 | <!--
 2 | Copyright 2018
 3 | 
 4 | Licensed under the Apache License, Version 2.0 (the "License");
 5 | you may not use this file except in compliance with the License.
 6 | You may obtain a copy of the License at
 7 | 
 8 |      http://www.apache.org/licenses/LICENSE-2.0
 9 | 
10 | Unless required by applicable law or agreed to in writing, software
11 | distributed under the License is distributed on an "AS IS" BASIS,
12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | See the License for the specific language governing permissions and
14 | limitations under the License.
15 | 
16 | Author: Ewa Gasperowicz (@devnook)
17 | -->
18 | <!DOCTYPE html>
19 | <html lang="en">
20 |   <head>
21 |     <meta charset="utf-8">
22 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
23 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
24 |     <title>Offscreen Canvas</title>
25 |     <link rel="stylesheet" href="style.css" />
26 |   </head>
27 |   <body>
28 |     <header>
29 |       <h1>
30 |         OffscreenCanvas
31 |       </h1>
32 |       <div class="desc">
33 |         The OffscreenCanvas allows to create a canvas that can be rendered off screen. It
34 |         can also be used in web workers.
35 |       </div>
36 |       <nav>
37 |         <a href="index.html">Avoid jank</a>
38 |         <a href="keep-ui-responsive.html">Keep UI responsive</a>
39 |         <a href="gain-cpu-time.html" class="selected">Gain CPU time</a>
40 |         <a href="use-with-lib.html">Use with a library</a>
41 |       </nav>
42 |     </header>
43 |     <main>
44 |       <section class="support">Your browser does not support OffscreenCanvas.</section>
45 |       <section>
46 |         <p>
47 |           Gain CPU time on each animation frame cycle by bypassing the document graphics update
48 |           (page compositing) code path. Note: this is true even when using OffscreenCanvas
49 |           on the main thread.
50 |         </p>
51 |         <p class="desc">
52 |           TBD
53 |         </p>
54 |       </section>
55 |     </main>
56 |   </body>
57 |   <script>
58 |     (() => {
59 |       // Feature detect.
60 |       document.querySelector('main').classList.toggle(
61 |         'supported', ('OffscreenCanvas' in window));
62 |     })();
63 |   </script>
64 | </html>
65 | 


--------------------------------------------------------------------------------
/google38628efc87e53b4d.html:
--------------------------------------------------------------------------------
1 | google-site-verification: google38628efc87e53b4d.html


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!--
  2 | Copyright 2018
  3 | 
  4 | Licensed under the Apache License, Version 2.0 (the "License");
  5 | you may not use this file except in compliance with the License.
  6 | You may obtain a copy of the License at
  7 | 
  8 |      http://www.apache.org/licenses/LICENSE-2.0
  9 | 
 10 | Unless required by applicable law or agreed to in writing, software
 11 | distributed under the License is distributed on an "AS IS" BASIS,
 12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 13 | See the License for the specific language governing permissions and
 14 | limitations under the License.
 15 | 
 16 | Author: Ewa Gasperowicz (@devnook)
 17 | -->
 18 | <!DOCTYPE html>
 19 | <html lang="en">
 20 | 
 21 | <head>
 22 |   <meta charset="utf-8">
 23 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 24 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 25 |   <title>Offscreen Canvas</title>
 26 |   <link rel="stylesheet" href="style.css" />
 27 | </head>
 28 | 
 29 | <body>
 30 |   <header class="hide-in-iframe">
 31 |     <h1>
 32 |       OffscreenCanvas
 33 |     </h1>
 34 |     <div class="desc">
 35 |       The OffscreenCanvas allows to create a canvas that can be rendered off screen. It
 36 |       can also be used in web workers.
 37 |     </div>
 38 |     <nav>
 39 |       <a href="index.html" class="selected">Avoid jank</a>
 40 |       <a href="keep-ui-responsive.html">Keep UI responsive</a>
 41 |       <a href="gain-cpu-time.html">Gain CPU time</a>
 42 |       <a href="use-with-lib.html">Use with a library</a>
 43 |   </header>
 44 |   <main>
 45 | 
 46 |     <section class="support">Your browser does not support OffscreenCanvas.</section>
 47 | 
 48 |     <section>
 49 |       <p class="hide-in-iframe">
 50 |         OffscreenCanvas lets you avoid animation jank caused by main thread event traffic
 51 |       </p>
 52 |       <p class="desc">
 53 |         When you click "make busy" button, the animation on window canvas is
 54 |         blocked, while OffscreenCanvas, running on a worker, still plays smoothly.
 55 |       </p>
 56 |       <button id="make-busy">Make me busy!</button>
 57 |       <div id="busy">&nbsp;</div>
 58 | 
 59 |     <div class="display">
 60 |       <div>
 61 |         <h1>
 62 |           Canvas on main thread
 63 |         </h1>
 64 |         <canvas id="canvas-window" width="400" height="200"></canvas>
 65 |       </div>
 66 |       <div>
 67 |         <h1>
 68 |           Canvas on worker
 69 |         </h1>
 70 |         <canvas id="canvas-worker" width="400" height="200"></canvas>
 71 |       </div>
 72 |       </div>
 73 |     </section>
 74 |   </main>
 75 | 
 76 |   <script src="animation.js"></script>
 77 | 
 78 |   <script type="script/worker" id="workerCode">
 79 |     let animationWorker = null;
 80 |     self.onmessage = function(e) {
 81 |       switch (e.data.msg) {
 82 |         case 'start':
 83 |           if (!animationWorker) {
 84 |             importScripts(e.data.origin + '/animation.js');
 85 |             animationWorker = new Animation(e.data.canvas.getContext('2d'));
 86 |           }
 87 |           animationWorker.start();
 88 |           break;
 89 |         case 'stop':
 90 |           animationWorker.stop();
 91 |           break;
 92 |       }
 93 |     };
 94 |   </script>
 95 | 
 96 |   <script>
 97 |     (async () => {
 98 | 
 99 |       // Feature detect.
100 |       document.querySelector('main').classList.toggle(
101 |         'supported', ('OffscreenCanvas' in window));
102 | 
103 |       document.body.classList.toggle(
104 |         'iframe', (window.location != window.parent.location));
105 | 
106 |       document.querySelector('#make-busy').addEventListener('click', () => {
107 |         document.querySelector('#busy').innerText = 'Main thread working...';
108 |         requestAnimationFrame(() => {
109 |           requestAnimationFrame(() => {
110 |             Animation.fibonacci(40);
111 |             document.querySelector('#busy').innerText = 'Done!';
112 |           });
113 |         })
114 |       });
115 | 
116 |       const canvas = document.querySelector('#case1');
117 |       const animationWindow = new Animation(document.querySelector('#canvas-window').getContext('2d'));
118 |       animationWindow.start();
119 | 
120 |       const workerCode = document.querySelector('#workerCode').textContent;
121 |       const blob = new Blob([workerCode], { type: 'text/javascript' });
122 |       const url = URL.createObjectURL(blob);
123 |       const worker = new Worker(url);
124 | 
125 |       const offscreen = document.querySelector('#canvas-worker').transferControlToOffscreen();
126 |       const urlParts = location.href.split('/');
127 |       if (urlParts[urlParts.length - 1].indexOf('.') !== -1) {
128 |         urlParts.pop();
129 |       }
130 |       worker.postMessage({ msg: 'start', origin: urlParts.join('/'), canvas: offscreen }, [offscreen]);
131 |       URL.revokeObjectURL(url); // cleanup
132 |     })();
133 | 
134 | 
135 |   </script>
136 | </body>
137 | 
138 | </html>
139 | 


--------------------------------------------------------------------------------
/keep-ui-responsive.html:
--------------------------------------------------------------------------------
  1 | <!--
  2 | Copyright 2018
  3 | 
  4 | Licensed under the Apache License, Version 2.0 (the "License");
  5 | you may not use this file except in compliance with the License.
  6 | You may obtain a copy of the License at
  7 | 
  8 |      http://www.apache.org/licenses/LICENSE-2.0
  9 | 
 10 | Unless required by applicable law or agreed to in writing, software
 11 | distributed under the License is distributed on an "AS IS" BASIS,
 12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 13 | See the License for the specific language governing permissions and
 14 | limitations under the License.
 15 | 
 16 | Author: Ewa Gasperowicz (@devnook)
 17 | -->
 18 | <!DOCTYPE html>
 19 | <html lang="en">
 20 | 
 21 | <head>
 22 |   <meta charset="utf-8">
 23 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 24 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 25 |   <title>Offscreen Canvas</title>
 26 |   <link rel="stylesheet" href="style.css" />
 27 | </head>
 28 | 
 29 | <body>
 30 |   <header class="hide-in-iframe">
 31 |     <h1>
 32 |       OffscreenCanvas
 33 |     </h1>
 34 |     <div class="desc">
 35 |       The OffscreenCanvas allows to create a canvas that can be rendered off screen. It
 36 |       can also be used in web workers.
 37 |     </div>
 38 |     <nav>
 39 |       <a href="index.html">Avoid jank</a>
 40 |       <a href="keep-ui-responsive.html" class="selected">Keep UI responsive</a>
 41 |       <a href="gain-cpu-time.html">Gain CPU time</a>
 42 |       <a href="use-with-lib.html">Use with a library</a>
 43 |     </nav>
 44 |   </header>
 45 |   <main class="supported">
 46 |     <section class="support">Your browser does not support OffscreenCanvas.</section>
 47 |     <section>
 48 |       <p class="hide-in-iframe">
 49 |         If an app has long running rendering tasks (e.g. ray tracing in WebGL), running those
 50 |         tasks in a worker allows the web app’s UI to remain responsive while the rendering
 51 |         task runs continuously in the background.
 52 |       </p>
 53 |       <p class="desc">
 54 |         The animation below is running a heavy task while changing the color theme.
 55 |         If you click on the button at such moment, the interaction is blocked
 56 |         for a short while causing bad user experience.
 57 |       </p>
 58 |       <p>
 59 |         <input type="checkbox" id="play" class="cbx hidden"/>
 60 |         <label for="play" id="play-label" class="lbl">Runs on main thread</label>
 61 |       </p>
 62 |       <p>
 63 |         <button id="interactive">Interact! Counter: <span id="log">0</span></button>
 64 |       </p>
 65 | 
 66 |       <div class="display">
 67 |         <div>
 68 |           <h1>Canvas on main thread</h1>
 69 |           <p>Interaction is blocked when a theme is loading</p>
 70 |           <canvas id="canvas-window" width="400" height="400"></canvas>
 71 |         </div>
 72 |         <div>
 73 |           <h1>Canvas on worker thread</h1>
 74 |           <p>Interaction works even if a theme is loading</p>
 75 |           <canvas id="canvas-worker" width="400" height="400"></canvas>
 76 |         </div>
 77 |       </div>
 78 |     </section>
 79 |   </main>
 80 | 
 81 |   <script src="animation.js"></script>
 82 | 
 83 |   <script type="script/worker" id="workerCode">
 84 |     let animationWorker = null;
 85 |     self.onmessage = function(e) {
 86 |       switch (e.data.msg) {
 87 |         case 'start':
 88 |           if (!animationWorker) {
 89 |             importScripts(e.data.origin + '/animation.js');
 90 |             animationWorker = new ThemedAnimation(e.data.canvas.getContext('2d'));
 91 |           }
 92 |           animationWorker.start();
 93 |           break;
 94 |         case 'stop':
 95 |           if (!animationWorker) {
 96 |             return;
 97 |           }
 98 |           animationWorker.stop();
 99 |           break;
100 |       }
101 |     };
102 |   </script>
103 | 
104 |   <script>
105 |     (() => {
106 |       // Feature detect.
107 |       document.querySelector('main').classList.toggle(
108 |         'supported', ('OffscreenCanvas' in window));
109 | 
110 |       document.body.classList.toggle(
111 |         'iframe', (window.location != window.parent.location));
112 | 
113 |       const playWindowBtn = document.querySelector('#play-window');
114 |       const playWorkerBtn = document.querySelector('#play-worker');
115 |       const workerCode = document.querySelector('#workerCode').textContent;
116 |       const blob = new Blob([workerCode], { type: 'text/javascript' });
117 |       const url = URL.createObjectURL(blob);
118 |       const worker = new Worker(url);
119 | 
120 |       const animationWindow = new ThemedAnimation(document.querySelector('#canvas-window').getContext('2d'));
121 |       const offscreen = document.querySelector('#canvas-worker').transferControlToOffscreen();
122 |       let workerStarted = false;
123 | 
124 |       document.querySelector('#interactive').addEventListener('click', () => {
125 |         const logBox = document.querySelector('#log');
126 |         const value = parseInt(logBox.innerText, 10) + 1;
127 |         logBox.innerText = value;
128 |       });
129 | 
130 |       const playBtn = document.querySelector('#play');
131 |       const playLabel = document.querySelector('#play-label');
132 |       playBtn.addEventListener('change', (e) => {
133 |         const inWorker = e.target.checked;
134 |         playLabel.innerHTML = inWorker ? 'Runs in worker' : 'Runs on main thread';
135 |         playAnimation(inWorker);
136 |       });
137 | 
138 |       function playAnimation(inWorker) {
139 |         if (inWorker) {
140 |           animationWindow.stop();
141 |           if (workerStarted) {
142 |             worker.postMessage({ msg: 'start' });
143 |           } else {
144 |             const urlParts = location.href.split('/');
145 |             if (urlParts[urlParts.length - 1].indexOf('.') !== -1) {
146 |               urlParts.pop();
147 |             }
148 |             worker.postMessage({ msg: 'start', origin: urlParts.join('/'), canvas: offscreen }, [offscreen]);
149 |             workerStarted = true;
150 |           }
151 |         } else {
152 |           worker.postMessage({ msg: 'stop' });
153 |           animationWindow.start();
154 |         }
155 |       }
156 |       animationWindow.start();
157 |     })()
158 |   </script>
159 | </body>
160 | 
161 | </html>
162 | 


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
  1 | html {
  2 |   /* Primary color */
  3 |   --color-primary: #ffc107;
  4 |   --color-primary-light: #fff350;
  5 |   --color-primary-dark: #c79100;
  6 | 
  7 |   /* Secondary color */
  8 |   --color-secondary: #00b8d4;
  9 |   --color-secondary-light: #62ebff;
 10 |   --color-secondary-dark: #0088a3;
 11 | 
 12 |   /* Text on colored background */
 13 |   --text-on-primary-light: #000;
 14 |   --text-on-primary-dark: #fff;
 15 |   --text-on-secondary: #000;
 16 |   --text-on-secondary-dark: #fff;
 17 | 
 18 |   /* Background color */
 19 |   --color-background-dark: #e1e2e1;
 20 |   --color-background-light: #F5F5F6;
 21 | 
 22 |   /* Text color */
 23 |   --color-text: #444;
 24 |   --color-text-vivid: #000;
 25 |   --color-text-subtle: #bbb;
 26 | }
 27 | 
 28 | html,
 29 | body {
 30 |   background-color: var(--color-background-light);
 31 |   font-family: Roboto, sans-serif;
 32 |   margin: 0;
 33 | }
 34 | 
 35 | .iframe .hide-in-iframe {
 36 |   display: none;
 37 | }
 38 | 
 39 | section {
 40 |   padding: 1em;
 41 |   text-align: center;
 42 |   font-family: Roboto, sans-serif;
 43 | }
 44 | 
 45 | .display {
 46 |   justify-content: center;
 47 |   display: flex;
 48 | }
 49 | 
 50 | .display div {
 51 |   background-color: #fff;
 52 |   margin: 1em;
 53 | }
 54 | 
 55 | button {
 56 |   height: 36px;
 57 |   padding: 0 16px;
 58 |   border: none;
 59 |   border-radius: 2px;
 60 |   outline: none;
 61 |   background: transparent;
 62 |   font-size: 14px;
 63 |   font-weight: 500;
 64 |   line-height: 36px;
 65 |   text-align: center;
 66 |   text-decoration: none;
 67 |   text-transform: uppercase;
 68 |   overflow: hidden;
 69 |   vertical-align: middle;
 70 |   user-select: none;
 71 |   box-sizing: border-box;
 72 |   color: #00B8D4;
 73 | }
 74 | 
 75 | header>h1 {
 76 |   background-color: var(--color-primary-dark);
 77 |   color: var(--text-on-primary-dark);
 78 |   margin: 0;
 79 |   font-weight: normal;
 80 |   padding: 1rem;
 81 | }
 82 | 
 83 | header .desc {
 84 |   background-color: var(--color-primary);
 85 |   color: var(--text-on-primary);
 86 |   padding: 1rem;
 87 | }
 88 | 
 89 | header nav {
 90 |   background-color: var(--color-primary-light);
 91 |   color: var(--text-on-primary-light);
 92 |   padding: 0 1rem;
 93 | }
 94 | 
 95 | nav a {
 96 |   color: var(--text-on-primary-light);
 97 |   text-decoration: none;
 98 |   line-height: 3em;
 99 |   height: 3em;
100 |   display: inline-block;
101 |   padding: 0 1rem;
102 | }
103 | 
104 | nav a.selected {
105 |   border-bottom: 4px solid var(--color-secondary);
106 | 
107 | }
108 | 
109 | main section {
110 |   display: none;
111 | }
112 | 
113 | main section.support {
114 |   display: block;
115 | }
116 | 
117 | main.supported section {
118 |   display: block;
119 | }
120 | 
121 | main.supported section.support {
122 |   display: none;
123 | }
124 | 
125 | .desc {
126 |   color: #999;
127 |   font-style: italic;
128 | }
129 | 
130 | /* Toggle */
131 | 
132 | .lbl {
133 |   padding-left: 54px;
134 |   width: 150px;
135 |   display: block;
136 |   position: relative;
137 |   margin: auto;
138 | }
139 | .lbl:before {
140 |   content: '';
141 |   top: 0;
142 |   left: 0;
143 |   display: inline-block;
144 |   position: absolute;
145 |   display: block;
146 |   height: 20px;
147 |   width: 44px;
148 |   background: #898989;
149 |   border-radius: 100px;
150 |   cursor: pointer;
151 |   transition: all 0.3s ease;
152 | }
153 | .lbl:after {
154 |   position: absolute;
155 |   left: -2px;
156 |   top: -3px;
157 |   display: inline-block;
158 |   width: 26px;
159 |   height: 26px;
160 |   border-radius: 100px;
161 |   background: #fff;
162 |   box-shadow: 0px 3px 3px rgba(0,0,0,0.05);
163 |   content: '';
164 |   transition: all 0.3s ease;
165 | }
166 | .lbl:active:after {
167 |   transform: scale(1.15, 0.85);
168 | }
169 | .cbx:checked ~ label:before {
170 |   background: #6fbeb5;
171 | }
172 | .cbx:checked ~ label:after {
173 |   left: 20px;
174 |   background: #179588;
175 | }
176 | .cbx:disabled ~ label:before {
177 |   background: #d5d5d5;
178 |   pointer-events: none;
179 | }
180 | .cbx:disabled ~ label:after {
181 |   background: #bcbdbc;
182 | }
183 | .hidden {
184 |   display: none;
185 | }
186 | 


--------------------------------------------------------------------------------
/threejs-cube.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |   Copyright 2018
 3 | 
 4 | Licensed under the Apache License, Version 2.0(the "License");
 5 | you may not use this file except in compliance with the License.
 6 | You may obtain a copy of the License at
 7 | 
 8 | http://www.apache.org/licenses/LICENSE-2.0
 9 | 
10 | Unless required by applicable law or agreed to in writing, software
11 | distributed under the License is distributed on an "AS IS" BASIS,
12 |   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | See the License for the specific language governing permissions and
14 | limitations under the License.
15 | 
16 |   Author: Ewa Gasperowicz(@devnook)
17 | */
18 | class ThreejsCube {
19 |   constructor(renderer) {
20 |     this.renderer = renderer;
21 |     this.scene = new THREE.Scene();
22 |     this.camera = new THREE.PerspectiveCamera(75, 400 / 200, 0.1, 1000);
23 |     const geometry = new THREE.BoxGeometry(1, 1, 1);
24 |     const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
25 |     this.cube = new THREE.Mesh(geometry, material);
26 |     this.scene.add(this.cube);
27 |     this.camera.position.z = 5;
28 | 
29 |     this.boundAnimate = this.animate.bind(this);
30 |   }
31 | 
32 |   animate() {
33 |     requestAnimationFrame(this.boundAnimate);
34 |     this.cube.rotation.x += 0.01;
35 |     this.cube.rotation.y += 0.01;
36 |     this.renderer.render(this.scene, this.camera);
37 |   }
38 | }
39 | 


--------------------------------------------------------------------------------
/use-in-worker.html:
--------------------------------------------------------------------------------
 1 | <!--
 2 | Copyright 2018
 3 | 
 4 | Licensed under the Apache License, Version 2.0 (the "License");
 5 | you may not use this file except in compliance with the License.
 6 | You may obtain a copy of the License at
 7 | 
 8 |      http://www.apache.org/licenses/LICENSE-2.0
 9 | 
10 | Unless required by applicable law or agreed to in writing, software
11 | distributed under the License is distributed on an "AS IS" BASIS,
12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | See the License for the specific language governing permissions and
14 | limitations under the License.
15 | 
16 | Author: Ewa Gasperowicz (@devnook)
17 | -->
18 | <!DOCTYPE html>
19 | <html lang="en">
20 |   <head>
21 |     <meta charset="utf-8">
22 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
23 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
24 |     <title>Offscreen Canvas</title>
25 |     <link rel="stylesheet" href="style.css" />
26 |   </head>
27 |   <body>
28 |     <header>
29 |       <h1>
30 |         OffscreenCanvas
31 |       </h1>
32 |       <div class="desc">
33 |         The OffscreenCanvas allows to create a canvas that can be rendered off screen. It
34 |         can also be used in web workers.
35 |       </div>
36 |       <nav>
37 |         <a href="index.html">Avoid jank</a>
38 |         <a href="keep-ui-responsive.html">Keep UI responsive</a>
39 |         <a href="gain-cpu-time.html">Gain CPU time</a>
40 |         <a href="use-in-worker.html" class="selected">Use in Worker</a>
41 |       </nav>
42 |     </header>
43 |     <main>
44 |       <section class="support">Your browser does not support OffscreenCanvas.</section>
45 |       <section>
46 |         <p>
47 |           Gain CPU time on each animation frame cycle by bypassing the document graphics update
48 |           (page compositing) code path. Note: this is true even when using OffscreenCanvas
49 |           on the main thread.
50 |         </p>
51 |         <p class="desc">
52 |           TBD
53 |         </p>
54 |       </section>
55 |     </main>
56 |   </body>
57 |   <script>
58 |     (() => {
59 |       // Feature detect.
60 |       document.querySelector('main').classList.toggle(
61 |         'supported', ('OffscreenCanvas' in window));
62 |     })();
63 |   </script>
64 | </html>
65 | 


--------------------------------------------------------------------------------
/use-with-lib.html:
--------------------------------------------------------------------------------
  1 | <!--
  2 | Copyright 2018
  3 | 
  4 | Licensed under the Apache License, Version 2.0 (the "License");
  5 | you may not use this file except in compliance with the License.
  6 | You may obtain a copy of the License at
  7 | 
  8 |      http://www.apache.org/licenses/LICENSE-2.0
  9 | 
 10 | Unless required by applicable law or agreed to in writing, software
 11 | distributed under the License is distributed on an "AS IS" BASIS,
 12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 13 | See the License for the specific language governing permissions and
 14 | limitations under the License.
 15 | 
 16 | Author: Ewa Gasperowicz (@devnook)
 17 | -->
 18 | <!DOCTYPE html>
 19 | <html lang="en">
 20 | 
 21 | <head>
 22 |   <meta charset="utf-8">
 23 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 24 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 25 |   <title>Offscreen Canvas</title>
 26 |   <link rel="stylesheet" href="style.css" />
 27 | </head>
 28 | 
 29 | <body>
 30 |   <header class="hide-in-iframe">
 31 |     <h1>
 32 |       OffscreenCanvas
 33 |     </h1>
 34 |     <div class="desc">
 35 |       The OffscreenCanvas allows to create a canvas that can be rendered off screen. It
 36 |       can also be used in web workers.
 37 |     </div>
 38 |     <nav>
 39 |       <a href="index.html">Avoid jank</a>
 40 |       <a href="keep-ui-responsive.html">Keep UI responsive</a>
 41 |       <a href="gain-cpu-time.html">Gain CPU time</a>
 42 |       <a href="use-with-lib.html" class="selected">Use with a library</a>
 43 |     </nav>
 44 |   </header>
 45 |   <main>
 46 | 
 47 |     <section class="support">Your browser does not support OffscreenCanvas.</section>
 48 | 
 49 |     <section>
 50 |       <p class="hide-in-iframe">
 51 |         OffscreenCanvas can be used as a progressive enhancement, also with some of the leading graphic
 52 |         libraries on the market like three.js.
 53 |       </p>
 54 |       <p class="desc">
 55 |         When you click "make busy" button, the animation on window canvas is
 56 |         blocked, while OffscreenCanvas, running on a worker, still plays smoothly.
 57 |       </p>
 58 |       <button id="make-busy">Make me busy!</button>
 59 |       <div id="busy">&nbsp;</div>
 60 | 
 61 |     <div class="display">
 62 |       <div>
 63 |         <h1>
 64 |           Canvas on main thread
 65 |         </h1>
 66 |         <canvas id="canvas-window" width="400" height="200"></canvas>
 67 |       </div>
 68 |       <div>
 69 |         <h1>
 70 |           Canvas on worker
 71 |         </h1>
 72 |         <canvas id="canvas-worker" width="400" height="200"></canvas>
 73 |       </div>
 74 |       </div>
 75 |     </section>
 76 |   </main>
 77 | 
 78 |   <script src="animation.js"></script>
 79 |   <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/94/three.min.js"></script>
 80 |   <script src="threejs-cube.js"></script>
 81 | 
 82 |   <script type="script/worker" id="workerCode">
 83 |     let cube = null;
 84 | 
 85 |     self.onmessage = function(e) {
 86 |       switch (e.data.msg) {
 87 |         case 'start':
 88 |           if (!cube) {
 89 |             importScripts('https://cdnjs.cloudflare.com/ajax/libs/three.js/94/three.min.js');
 90 |             importScripts(e.data.origin + '/threejs-cube.js');
 91 |             e.data.canvas.style = { width: 0, height: 0 }
 92 |             const renderer = new THREE.WebGLRenderer({ canvas: e.data.canvas });
 93 |             renderer.setSize(400, 200);
 94 |             cube = new ThreejsCube(renderer);
 95 |           }
 96 |           cube.animate();
 97 |           break;
 98 |       }
 99 |     };
100 |   </script>
101 |   <script>
102 |     (async () => {
103 | 
104 |       // Feature detect.
105 |       document.querySelector('main').classList.toggle(
106 |         'supported', ('OffscreenCanvas' in window));
107 | 
108 |       document.body.classList.toggle(
109 |         'iframe', (window.location != window.parent.location));
110 | 
111 |       document.querySelector('#make-busy').addEventListener('click', () => {
112 |         document.querySelector('#busy').innerText = 'Main thread working...';
113 |         requestAnimationFrame(() => {
114 |           requestAnimationFrame(() => {
115 |             Animation.fibonacci(40);  // Artificially slow down main thread.
116 |             document.querySelector('#busy').innerText = 'Done!';
117 |           });
118 |         })
119 |       });
120 | 
121 |       const canvasWindow = document.querySelector("#canvas-window");
122 |       const canvasOffscreen = document.querySelector("#canvas-worker").transferControlToOffscreen();
123 |       const renderer = new THREE.WebGLRenderer({ canvas: canvasWindow });
124 |       renderer.setSize(400, 200);
125 |       const cube = new ThreejsCube(renderer);
126 |       cube.animate();
127 | 
128 |       const workerCode = document.querySelector('#workerCode').textContent;
129 |       const blob = new Blob([workerCode], { type: 'text/javascript' });
130 |       const url = URL.createObjectURL(blob);
131 |       const worker = new Worker(url);
132 |       const urlParts = location.href.split('/');
133 |       if (urlParts[urlParts.length - 1].indexOf('.') !== -1) {
134 |         urlParts.pop();
135 |       }
136 | 
137 |       worker.postMessage({ msg: 'start', origin: urlParts.join('/'), canvas: canvasOffscreen }, [canvasOffscreen]);
138 |       URL.revokeObjectURL(url); // cleanup
139 |     })();
140 |   </script>
141 | </body>
142 | 
143 | </html>
144 | 


--------------------------------------------------------------------------------