etro 0.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (103) hide show
  1. package/.env +2 -0
  2. package/.github/workflows/nodejs.yml +27 -0
  3. package/CHANGELOG.md +109 -0
  4. package/CODE_OF_CONDUCT.md +77 -0
  5. package/CONTRIBUTING.md +155 -0
  6. package/LICENSE +674 -0
  7. package/README.md +57 -0
  8. package/dist/etro.js +3397 -0
  9. package/docs/effect.js.html +1215 -0
  10. package/docs/event.js.html +145 -0
  11. package/docs/index.html +81 -0
  12. package/docs/index.js.html +92 -0
  13. package/docs/layer.js.html +888 -0
  14. package/docs/module-effect-GaussianBlurComponent.html +345 -0
  15. package/docs/module-effect.Brightness.html +339 -0
  16. package/docs/module-effect.Channels.html +319 -0
  17. package/docs/module-effect.ChromaKey.html +611 -0
  18. package/docs/module-effect.Contrast.html +339 -0
  19. package/docs/module-effect.EllipticalMask.html +200 -0
  20. package/docs/module-effect.GaussianBlur.html +202 -0
  21. package/docs/module-effect.GaussianBlurHorizontal.html +242 -0
  22. package/docs/module-effect.GaussianBlurVertical.html +242 -0
  23. package/docs/module-effect.Pixelate.html +330 -0
  24. package/docs/module-effect.Shader.html +1227 -0
  25. package/docs/module-effect.Stack.html +406 -0
  26. package/docs/module-effect.Transform.Matrix.html +193 -0
  27. package/docs/module-effect.Transform.html +1174 -0
  28. package/docs/module-effect.html +148 -0
  29. package/docs/module-event.html +473 -0
  30. package/docs/module-index.html +186 -0
  31. package/docs/module-layer-Media.html +1116 -0
  32. package/docs/module-layer-MediaMixin.html +164 -0
  33. package/docs/module-layer.Audio.html +1188 -0
  34. package/docs/module-layer.Base.html +629 -0
  35. package/docs/module-layer.Image.html +1421 -0
  36. package/docs/module-layer.Text.html +1731 -0
  37. package/docs/module-layer.Video.html +1938 -0
  38. package/docs/module-layer.Visual.html +1698 -0
  39. package/docs/module-layer.html +137 -0
  40. package/docs/module-movie.html +3118 -0
  41. package/docs/module-util.Color.html +702 -0
  42. package/docs/module-util.Font.html +395 -0
  43. package/docs/module-util.html +845 -0
  44. package/docs/movie.js.html +689 -0
  45. package/docs/scripts/collapse.js +20 -0
  46. package/docs/scripts/linenumber.js +25 -0
  47. package/docs/scripts/nav.js +12 -0
  48. package/docs/scripts/polyfill.js +4 -0
  49. package/docs/scripts/prettify/Apache-License-2.0.txt +202 -0
  50. package/docs/scripts/prettify/lang-css.js +2 -0
  51. package/docs/scripts/prettify/prettify.js +28 -0
  52. package/docs/scripts/search.js +83 -0
  53. package/docs/styles/jsdoc.css +671 -0
  54. package/docs/styles/prettify.css +79 -0
  55. package/docs/util.js.html +503 -0
  56. package/eslint.conf.js +28 -0
  57. package/eslint.test-conf.js +4 -0
  58. package/examples/application/readme-screenshot.html +86 -0
  59. package/examples/application/video-player.html +131 -0
  60. package/examples/application/webcam.html +28 -0
  61. package/examples/introduction/audio.html +52 -0
  62. package/examples/introduction/effects.html +56 -0
  63. package/examples/introduction/export.html +70 -0
  64. package/examples/introduction/functions.html +35 -0
  65. package/examples/introduction/hello-world1.html +33 -0
  66. package/examples/introduction/hello-world2.html +32 -0
  67. package/examples/introduction/keyframes.html +67 -0
  68. package/examples/introduction/media.html +55 -0
  69. package/examples/introduction/text.html +27 -0
  70. package/jsdoc.conf.json +3 -0
  71. package/karma.conf.js +60 -0
  72. package/package.json +63 -0
  73. package/private-todo.txt +70 -0
  74. package/rename-file.sh +18 -0
  75. package/rename-versions.sh +14 -0
  76. package/rename.sh +22 -0
  77. package/rollup.config.js +31 -0
  78. package/screenshots/2019-08-17_0.png +0 -0
  79. package/scripts/gen-effect-samples.html +99 -0
  80. package/scripts/save-effect-samples.js +43 -0
  81. package/spec/assets/effect/gaussian-blur-horizontal.png +0 -0
  82. package/spec/assets/effect/gaussian-blur-vertical.png +0 -0
  83. package/spec/assets/effect/original.png +0 -0
  84. package/spec/assets/effect/pixelate.png +0 -0
  85. package/spec/assets/effect/transform/multiply.png +0 -0
  86. package/spec/assets/effect/transform/rotate.png +0 -0
  87. package/spec/assets/effect/transform/scale-fraction.png +0 -0
  88. package/spec/assets/effect/transform/scale.png +0 -0
  89. package/spec/assets/effect/transform/translate-fraction.png +0 -0
  90. package/spec/assets/effect/transform/translate.png +0 -0
  91. package/spec/assets/layer/audio.wav +0 -0
  92. package/spec/assets/layer/image.jpg +0 -0
  93. package/spec/effect.spec.js +352 -0
  94. package/spec/event.spec.js +25 -0
  95. package/spec/layer.spec.js +128 -0
  96. package/spec/movie.spec.js +154 -0
  97. package/spec/util.spec.js +285 -0
  98. package/src/effect.js +1265 -0
  99. package/src/event.js +78 -0
  100. package/src/index.js +23 -0
  101. package/src/layer.js +875 -0
  102. package/src/movie.js +636 -0
  103. package/src/util.js +487 -0
@@ -0,0 +1,1698 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+
5
+ <meta charset="utf-8">
6
+ <title>Visual - Documentation</title>
7
+
8
+
9
+ <script src="scripts/prettify/prettify.js"></script>
10
+ <script src="scripts/prettify/lang-css.js"></script>
11
+ <!--[if lt IE 9]>
12
+ <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
13
+ <![endif]-->
14
+ <link type="text/css" rel="stylesheet" href="styles/prettify.css">
15
+ <link type="text/css" rel="stylesheet" href="styles/jsdoc.css">
16
+ <script src="scripts/nav.js" defer></script>
17
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
18
+ </head>
19
+ <body>
20
+
21
+ <input type="checkbox" id="nav-trigger" class="nav-trigger" />
22
+ <label for="nav-trigger" class="navicon-button x">
23
+ <div class="navicon"></div>
24
+ </label>
25
+
26
+ <label for="nav-trigger" class="overlay"></label>
27
+
28
+ <nav >
29
+
30
+ <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="module-effect.Brightness.html">Brightness</a></li><li><a href="module-effect.Channels.html">Channels</a></li><li><a href="module-effect.ChromaKey.html">ChromaKey</a></li><li><a href="module-effect.Contrast.html">Contrast</a></li><li><a href="module-effect.EllipticalMask.html">EllipticalMask</a></li><li><a href="module-effect.GaussianBlur.html">GaussianBlur</a></li><li><a href="module-effect.GaussianBlurHorizontal.html">GaussianBlurHorizontal</a></li><li><a href="module-effect.GaussianBlurVertical.html">GaussianBlurVertical</a></li><li><a href="module-effect.Pixelate.html">Pixelate</a></li><li><a href="module-effect.Shader.html">Shader</a><ul class='methods'><li data-type='method'><a href="module-effect.Shader.html#._initBuffer">_initBuffer</a></li><li data-type='method'><a href="module-effect.Shader.html#._loadTexture">_loadTexture</a></li><li data-type='method'><a href="module-effect.Shader.html#_prepareValue">_prepareValue</a></li></ul></li><li><a href="module-effect.Stack.html">Stack</a><ul class='methods'><li data-type='method'><a href="module-effect.Stack.html#addEffect">addEffect</a></li></ul></li><li><a href="module-effect.Transform.html">Transform</a><ul class='methods'><li data-type='method'><a href="module-effect.Transform.html#.Matrix#cell">Matrix#cell</a></li><li data-type='method'><a href="module-effect.Transform.html#.Matrix#multiply">Matrix#multiply</a></li><li data-type='method'><a href="module-effect.Transform.html#.Matrix#rotate">Matrix#rotate</a></li><li data-type='method'><a href="module-effect.Transform.html#.Matrix#scale">Matrix#scale</a></li><li data-type='method'><a href="module-effect.Transform.html#.Matrix#translate">Matrix#translate</a></li></ul></li><li><a href="module-effect.Transform.Matrix.html">Matrix</a></li><li><a href="module-effect-GaussianBlurComponent.html">GaussianBlurComponent</a></li><li><a href="module-layer.Audio.html">Audio</a></li><li><a href="module-layer.Base.html">Base</a><ul class='methods'><li data-type='method'><a href="module-layer.Base.html#_render">_render</a></li></ul></li><li><a href="module-layer.Image.html">Image</a></li><li><a href="module-layer.Text.html">Text</a></li><li><a href="module-layer.Video.html">Video</a></li><li><a href="module-layer.Visual.html">Visual</a><ul class='methods'><li data-type='method'><a href="module-layer.Visual.html#_render">_render</a></li><li data-type='method'><a href="module-layer.Visual.html#addEffect">addEffect</a></li></ul></li><li><a href="module-layer-Media.html">Media</a></li><li><a href="module-movie.html">movie</a><ul class='methods'><li data-type='method'><a href="module-movie.html#addEffect">addEffect</a></li><li data-type='method'><a href="module-movie.html#addLayer">addLayer</a></li><li data-type='method'><a href="module-movie.html#pause">pause</a></li><li data-type='method'><a href="module-movie.html#play">play</a></li><li data-type='method'><a href="module-movie.html#publishToLayers">publishToLayers</a></li><li data-type='method'><a href="module-movie.html#record">record</a></li><li data-type='method'><a href="module-movie.html#refresh">refresh</a></li><li data-type='method'><a href="module-movie.html#setCurrentTime">setCurrentTime</a></li><li data-type='method'><a href="module-movie.html#stop">stop</a></li></ul></li><li><a href="module-util.Color.html">Color</a><ul class='methods'><li data-type='method'><a href="module-util.Color.html#toString">toString</a></li></ul></li><li><a href="module-util.Font.html">Font</a><ul class='methods'><li data-type='method'><a href="module-util.Font.html#toString">toString</a></li></ul></li></ul><h3>Modules</h3><ul><li><a href="module-effect.html">effect</a></li><li><a href="module-event.html">event</a><ul class='methods'><li data-type='method'><a href="module-event.html#.publish">publish</a></li><li data-type='method'><a href="module-event.html#.subscribe">subscribe</a></li></ul></li><li><a href="module-index.html">index</a></li><li><a href="module-layer.html">layer</a></li><li><a href="module-movie.html">movie</a><ul class='methods'><li data-type='method'><a href="module-movie.html#addEffect">addEffect</a></li><li data-type='method'><a href="module-movie.html#addLayer">addLayer</a></li><li data-type='method'><a href="module-movie.html#pause">pause</a></li><li data-type='method'><a href="module-movie.html#play">play</a></li><li data-type='method'><a href="module-movie.html#publishToLayers">publishToLayers</a></li><li data-type='method'><a href="module-movie.html#record">record</a></li><li data-type='method'><a href="module-movie.html#refresh">refresh</a></li><li data-type='method'><a href="module-movie.html#setCurrentTime">setCurrentTime</a></li><li data-type='method'><a href="module-movie.html#stop">stop</a></li></ul></li><li><a href="module-util.html">util</a><ul class='methods'><li data-type='method'><a href="module-util.html#.parseColor">parseColor</a></li><li data-type='method'><a href="module-util.html#.parseFont">parseFont</a></li><li data-type='method'><a href="module-util.html#.watchPublic">watchPublic</a></li><li data-type='method'><a href="module-util.html#~isKeyFrames">isKeyFrames</a></li></ul></li></ul><h3>Mixins</h3><ul><li><a href="module-layer-MediaMixin.html">MediaMixin</a></li></ul>
31
+ </nav>
32
+
33
+ <div id="main">
34
+
35
+ <h1 class="page-title">Visual</h1>
36
+
37
+
38
+
39
+
40
+
41
+
42
+
43
+ <section>
44
+
45
+ <header>
46
+
47
+ <h2>
48
+ <span class="ancestors"><a href="module-layer.html">layer</a>.</span>
49
+
50
+ Visual
51
+ </h2>
52
+
53
+ <div class="class-description">Any layer that renders to a canvas</div>
54
+
55
+
56
+ </header>
57
+
58
+ <article>
59
+
60
+ <div class="container-overview">
61
+
62
+
63
+
64
+
65
+ <h2>Constructor</h2>
66
+
67
+
68
+ <h4 class="name" id="Visual"><span class="type-signature"></span>new Visual<span class="signature">(startTime, duration, options<span class="signature-attributes">opt</span>)</span><span class="type-signature"></span></h4>
69
+
70
+
71
+
72
+
73
+
74
+
75
+ <dl class="details">
76
+
77
+
78
+ <dt class="tag-source">Source:</dt>
79
+ <dd class="tag-source"><ul class="dummy"><li>
80
+ <a href="layer.js.html">layer.js</a>, <a href="layer.js.html#line113">line 113</a>
81
+ </li></ul></dd>
82
+
83
+
84
+
85
+
86
+
87
+
88
+
89
+
90
+
91
+
92
+
93
+
94
+
95
+
96
+
97
+
98
+
99
+
100
+
101
+
102
+
103
+
104
+
105
+
106
+
107
+
108
+
109
+
110
+
111
+
112
+
113
+ </dl>
114
+
115
+
116
+
117
+
118
+
119
+ <div class="description">
120
+ Creates a visual layer
121
+ </div>
122
+
123
+
124
+
125
+
126
+
127
+
128
+
129
+
130
+
131
+
132
+
133
+ <h5>Parameters:</h5>
134
+
135
+
136
+ <table class="params">
137
+ <thead>
138
+ <tr>
139
+
140
+ <th>Name</th>
141
+
142
+
143
+ <th>Type</th>
144
+
145
+
146
+ <th>Attributes</th>
147
+
148
+
149
+
150
+
151
+ <th class="last">Description</th>
152
+ </tr>
153
+ </thead>
154
+
155
+ <tbody>
156
+
157
+
158
+ <tr>
159
+
160
+ <td class="name"><code>startTime</code></td>
161
+
162
+
163
+ <td class="type">
164
+
165
+
166
+ <span class="param-type">number</span>
167
+
168
+
169
+
170
+ </td>
171
+
172
+
173
+ <td class="attributes">
174
+
175
+
176
+
177
+
178
+
179
+ </td>
180
+
181
+
182
+
183
+
184
+ <td class="description last">when to start the layer on the movie's timeline</td>
185
+ </tr>
186
+
187
+
188
+
189
+ <tr>
190
+
191
+ <td class="name"><code>duration</code></td>
192
+
193
+
194
+ <td class="type">
195
+
196
+
197
+ <span class="param-type">number</span>
198
+
199
+
200
+
201
+ </td>
202
+
203
+
204
+ <td class="attributes">
205
+
206
+
207
+
208
+
209
+
210
+ </td>
211
+
212
+
213
+
214
+
215
+ <td class="description last">how long the layer should last on the movie's timeline</td>
216
+ </tr>
217
+
218
+
219
+
220
+ <tr>
221
+
222
+ <td class="name"><code>options</code></td>
223
+
224
+
225
+ <td class="type">
226
+
227
+
228
+ <span class="param-type">object</span>
229
+
230
+
231
+
232
+ </td>
233
+
234
+
235
+ <td class="attributes">
236
+
237
+ &lt;optional><br>
238
+
239
+
240
+
241
+
242
+
243
+ </td>
244
+
245
+
246
+
247
+
248
+ <td class="description last">various optional arguments
249
+ <h6>Properties</h6>
250
+
251
+
252
+ <table class="params">
253
+ <thead>
254
+ <tr>
255
+
256
+ <th>Name</th>
257
+
258
+
259
+ <th>Type</th>
260
+
261
+
262
+ <th>Attributes</th>
263
+
264
+
265
+
266
+ <th>Default</th>
267
+
268
+
269
+ <th class="last">Description</th>
270
+ </tr>
271
+ </thead>
272
+
273
+ <tbody>
274
+
275
+
276
+ <tr>
277
+
278
+ <td class="name"><code>width</code></td>
279
+
280
+
281
+ <td class="type">
282
+
283
+
284
+ <span class="param-type">number</span>
285
+
286
+
287
+
288
+ </td>
289
+
290
+
291
+ <td class="attributes">
292
+
293
+ &lt;optional><br>
294
+
295
+
296
+
297
+
298
+
299
+ </td>
300
+
301
+
302
+
303
+ <td class="default">
304
+
305
+ <code>null</code>
306
+
307
+ </td>
308
+
309
+
310
+ <td class="description last">the width of the entire layer</td>
311
+ </tr>
312
+
313
+
314
+
315
+ <tr>
316
+
317
+ <td class="name"><code>height</code></td>
318
+
319
+
320
+ <td class="type">
321
+
322
+
323
+ <span class="param-type">number</span>
324
+
325
+
326
+
327
+ </td>
328
+
329
+
330
+ <td class="attributes">
331
+
332
+ &lt;optional><br>
333
+
334
+
335
+
336
+
337
+
338
+ </td>
339
+
340
+
341
+
342
+ <td class="default">
343
+
344
+ <code>null</code>
345
+
346
+ </td>
347
+
348
+
349
+ <td class="description last">the height of the entire layer</td>
350
+ </tr>
351
+
352
+
353
+
354
+ <tr>
355
+
356
+ <td class="name"><code>x</code></td>
357
+
358
+
359
+ <td class="type">
360
+
361
+
362
+ <span class="param-type">number</span>
363
+
364
+
365
+
366
+ </td>
367
+
368
+
369
+ <td class="attributes">
370
+
371
+ &lt;optional><br>
372
+
373
+
374
+
375
+
376
+
377
+ </td>
378
+
379
+
380
+
381
+ <td class="default">
382
+
383
+ <code>0</code>
384
+
385
+ </td>
386
+
387
+
388
+ <td class="description last">the offset of the layer relative to the movie</td>
389
+ </tr>
390
+
391
+
392
+
393
+ <tr>
394
+
395
+ <td class="name"><code>y</code></td>
396
+
397
+
398
+ <td class="type">
399
+
400
+
401
+ <span class="param-type">number</span>
402
+
403
+
404
+
405
+ </td>
406
+
407
+
408
+ <td class="attributes">
409
+
410
+ &lt;optional><br>
411
+
412
+
413
+
414
+
415
+
416
+ </td>
417
+
418
+
419
+
420
+ <td class="default">
421
+
422
+ <code>0</code>
423
+
424
+ </td>
425
+
426
+
427
+ <td class="description last">the offset of the layer relative to the movie</td>
428
+ </tr>
429
+
430
+
431
+
432
+ <tr>
433
+
434
+ <td class="name"><code>background</code></td>
435
+
436
+
437
+ <td class="type">
438
+
439
+
440
+ <span class="param-type">string</span>
441
+
442
+
443
+
444
+ </td>
445
+
446
+
447
+ <td class="attributes">
448
+
449
+ &lt;optional><br>
450
+
451
+
452
+
453
+
454
+
455
+ </td>
456
+
457
+
458
+
459
+ <td class="default">
460
+
461
+ <code>null</code>
462
+
463
+ </td>
464
+
465
+
466
+ <td class="description last">the background color of the layer, or <code>null</code>
467
+ for a transparent background</td>
468
+ </tr>
469
+
470
+
471
+
472
+ <tr>
473
+
474
+ <td class="name"><code>border</code></td>
475
+
476
+
477
+ <td class="type">
478
+
479
+
480
+ <span class="param-type">object</span>
481
+
482
+
483
+
484
+ </td>
485
+
486
+
487
+ <td class="attributes">
488
+
489
+ &lt;optional><br>
490
+
491
+
492
+
493
+
494
+
495
+ </td>
496
+
497
+
498
+
499
+ <td class="default">
500
+
501
+ <code>null</code>
502
+
503
+ </td>
504
+
505
+
506
+ <td class="description last">the layer's outline, or <code>null</code> for no outline
507
+ <h6>Properties</h6>
508
+
509
+
510
+ <table class="params">
511
+ <thead>
512
+ <tr>
513
+
514
+ <th>Name</th>
515
+
516
+
517
+ <th>Type</th>
518
+
519
+
520
+ <th>Attributes</th>
521
+
522
+
523
+
524
+ <th>Default</th>
525
+
526
+
527
+ <th class="last">Description</th>
528
+ </tr>
529
+ </thead>
530
+
531
+ <tbody>
532
+
533
+
534
+ <tr>
535
+
536
+ <td class="name"><code>color</code></td>
537
+
538
+
539
+ <td class="type">
540
+
541
+
542
+ <span class="param-type">string</span>
543
+
544
+
545
+
546
+ </td>
547
+
548
+
549
+ <td class="attributes">
550
+
551
+ &lt;optional><br>
552
+
553
+
554
+
555
+
556
+
557
+ </td>
558
+
559
+
560
+
561
+ <td class="default">
562
+
563
+ </td>
564
+
565
+
566
+ <td class="description last">the outline's color; required for a border</td>
567
+ </tr>
568
+
569
+
570
+
571
+ <tr>
572
+
573
+ <td class="name"><code>thickness</code></td>
574
+
575
+
576
+ <td class="type">
577
+
578
+
579
+ <span class="param-type">string</span>
580
+
581
+
582
+
583
+ </td>
584
+
585
+
586
+ <td class="attributes">
587
+
588
+ &lt;optional><br>
589
+
590
+
591
+
592
+
593
+
594
+ </td>
595
+
596
+
597
+
598
+ <td class="default">
599
+
600
+ <code>1</code>
601
+
602
+ </td>
603
+
604
+
605
+ <td class="description last">the outline's weight</td>
606
+ </tr>
607
+
608
+
609
+ </tbody>
610
+ </table>
611
+
612
+ </td>
613
+ </tr>
614
+
615
+
616
+
617
+ <tr>
618
+
619
+ <td class="name"><code>opacity</code></td>
620
+
621
+
622
+ <td class="type">
623
+
624
+
625
+ <span class="param-type">number</span>
626
+
627
+
628
+
629
+ </td>
630
+
631
+
632
+ <td class="attributes">
633
+
634
+ &lt;optional><br>
635
+
636
+
637
+
638
+
639
+
640
+ </td>
641
+
642
+
643
+
644
+ <td class="default">
645
+
646
+ <code>1</code>
647
+
648
+ </td>
649
+
650
+
651
+ <td class="description last">the layer's opacity; <code>1</cod> for full opacity
652
+ and <code>0</code> for full transparency</td>
653
+ </tr>
654
+
655
+
656
+ </tbody>
657
+ </table>
658
+
659
+ </td>
660
+ </tr>
661
+
662
+
663
+ </tbody>
664
+ </table>
665
+
666
+
667
+
668
+
669
+
670
+
671
+
672
+
673
+
674
+
675
+
676
+
677
+
678
+
679
+
680
+
681
+
682
+
683
+
684
+
685
+ </div>
686
+
687
+
688
+
689
+
690
+
691
+
692
+
693
+
694
+
695
+
696
+
697
+
698
+
699
+
700
+
701
+ <h3 class="subsection-title">Members</h3>
702
+
703
+
704
+
705
+ <h4 class="name" id="background"><span class="type-signature"></span>background<span class="type-signature"> :string</span></h4>
706
+
707
+
708
+
709
+
710
+
711
+ <dl class="details">
712
+
713
+
714
+ <dt class="tag-source">Source:</dt>
715
+ <dd class="tag-source"><ul class="dummy"><li>
716
+ <a href="layer.js.html">layer.js</a>, <a href="layer.js.html#line247">line 247</a>
717
+ </li></ul></dd>
718
+
719
+
720
+
721
+
722
+
723
+
724
+
725
+
726
+
727
+
728
+
729
+
730
+
731
+
732
+
733
+
734
+
735
+
736
+
737
+
738
+
739
+
740
+
741
+
742
+
743
+
744
+
745
+
746
+
747
+
748
+
749
+ </dl>
750
+
751
+
752
+
753
+
754
+
755
+ <div class="description">
756
+ The css color code for the background, or <code>null</code> for transparency
757
+ </div>
758
+
759
+
760
+
761
+ <h5>Type:</h5>
762
+ <ul>
763
+ <li>
764
+
765
+ <span class="param-type">string</span>
766
+
767
+
768
+ </li>
769
+ </ul>
770
+
771
+
772
+
773
+
774
+
775
+
776
+
777
+
778
+ <h4 class="name" id="border"><span class="type-signature"></span>border<span class="type-signature"> :string</span></h4>
779
+
780
+
781
+
782
+
783
+
784
+ <dl class="details">
785
+
786
+
787
+ <dt class="tag-source">Source:</dt>
788
+ <dd class="tag-source"><ul class="dummy"><li>
789
+ <a href="layer.js.html">layer.js</a>, <a href="layer.js.html#line253">line 253</a>
790
+ </li></ul></dd>
791
+
792
+
793
+
794
+
795
+
796
+
797
+
798
+
799
+
800
+
801
+
802
+
803
+
804
+
805
+
806
+
807
+
808
+
809
+
810
+
811
+
812
+
813
+
814
+
815
+
816
+
817
+
818
+
819
+
820
+
821
+
822
+ </dl>
823
+
824
+
825
+
826
+
827
+
828
+ <div class="description">
829
+ The css border style, or <code>null</code> for no border
830
+ </div>
831
+
832
+
833
+
834
+ <h5>Type:</h5>
835
+ <ul>
836
+ <li>
837
+
838
+ <span class="param-type">string</span>
839
+
840
+
841
+ </li>
842
+ </ul>
843
+
844
+
845
+
846
+
847
+
848
+
849
+
850
+
851
+ <h4 class="name" id="canvas"><span class="type-signature"></span>canvas<span class="type-signature"> :HTMLCanvasElement</span></h4>
852
+
853
+
854
+
855
+
856
+
857
+ <dl class="details">
858
+
859
+
860
+ <dt class="tag-source">Source:</dt>
861
+ <dd class="tag-source"><ul class="dummy"><li>
862
+ <a href="layer.js.html">layer.js</a>, <a href="layer.js.html#line202">line 202</a>
863
+ </li></ul></dd>
864
+
865
+
866
+
867
+
868
+
869
+
870
+
871
+
872
+
873
+
874
+
875
+
876
+
877
+
878
+
879
+
880
+
881
+
882
+
883
+
884
+
885
+
886
+
887
+
888
+
889
+
890
+
891
+
892
+
893
+
894
+
895
+ </dl>
896
+
897
+
898
+
899
+
900
+
901
+ <div class="description">
902
+ The intermediate rendering canvas
903
+ </div>
904
+
905
+
906
+
907
+ <h5>Type:</h5>
908
+ <ul>
909
+ <li>
910
+
911
+ <span class="param-type">HTMLCanvasElement</span>
912
+
913
+
914
+ </li>
915
+ </ul>
916
+
917
+
918
+
919
+
920
+
921
+
922
+
923
+
924
+ <h4 class="name" id="cctx"><span class="type-signature"></span>cctx<span class="type-signature"> :CanvasRenderingContext2D</span></h4>
925
+
926
+
927
+
928
+
929
+
930
+ <dl class="details">
931
+
932
+
933
+ <dt class="tag-source">Source:</dt>
934
+ <dd class="tag-source"><ul class="dummy"><li>
935
+ <a href="layer.js.html">layer.js</a>, <a href="layer.js.html#line210">line 210</a>
936
+ </li></ul></dd>
937
+
938
+
939
+
940
+
941
+
942
+
943
+
944
+
945
+
946
+
947
+
948
+
949
+
950
+
951
+
952
+
953
+
954
+
955
+
956
+
957
+
958
+
959
+
960
+
961
+
962
+
963
+
964
+
965
+
966
+
967
+
968
+ </dl>
969
+
970
+
971
+
972
+
973
+
974
+ <div class="description">
975
+ The context of <a href="module-layer.Visual.html#canvas">module:layer.Visual#canvas</a>
976
+ </div>
977
+
978
+
979
+
980
+ <h5>Type:</h5>
981
+ <ul>
982
+ <li>
983
+
984
+ <span class="param-type">CanvasRenderingContext2D</span>
985
+
986
+
987
+ </li>
988
+ </ul>
989
+
990
+
991
+
992
+
993
+
994
+
995
+
996
+
997
+ <h4 class="name" id="effects"><span class="type-signature"></span>effects<span class="type-signature"> :Array.&lt;effect.Base></span></h4>
998
+
999
+
1000
+
1001
+
1002
+
1003
+ <dl class="details">
1004
+
1005
+
1006
+ <dt class="tag-source">Source:</dt>
1007
+ <dd class="tag-source"><ul class="dummy"><li>
1008
+ <a href="layer.js.html">layer.js</a>, <a href="layer.js.html#line217">line 217</a>
1009
+ </li></ul></dd>
1010
+
1011
+
1012
+
1013
+
1014
+
1015
+
1016
+
1017
+
1018
+
1019
+
1020
+
1021
+
1022
+
1023
+
1024
+
1025
+
1026
+
1027
+
1028
+
1029
+
1030
+
1031
+
1032
+
1033
+
1034
+
1035
+
1036
+
1037
+
1038
+
1039
+
1040
+
1041
+ </dl>
1042
+
1043
+
1044
+
1045
+
1046
+
1047
+
1048
+
1049
+ <h5>Type:</h5>
1050
+ <ul>
1051
+ <li>
1052
+
1053
+ <span class="param-type">Array.&lt;effect.Base></span>
1054
+
1055
+
1056
+ </li>
1057
+ </ul>
1058
+
1059
+
1060
+
1061
+
1062
+
1063
+
1064
+
1065
+
1066
+ <h4 class="name" id="height"><span class="type-signature"></span>height<span class="type-signature"> :number</span></h4>
1067
+
1068
+
1069
+
1070
+
1071
+
1072
+ <dl class="details">
1073
+
1074
+
1075
+ <dt class="tag-source">Source:</dt>
1076
+ <dd class="tag-source"><ul class="dummy"><li>
1077
+ <a href="layer.js.html">layer.js</a>, <a href="layer.js.html#line242">line 242</a>
1078
+ </li></ul></dd>
1079
+
1080
+
1081
+
1082
+
1083
+
1084
+
1085
+
1086
+
1087
+
1088
+
1089
+
1090
+
1091
+
1092
+
1093
+
1094
+
1095
+
1096
+
1097
+
1098
+
1099
+
1100
+
1101
+
1102
+
1103
+
1104
+
1105
+
1106
+
1107
+
1108
+
1109
+
1110
+ </dl>
1111
+
1112
+
1113
+
1114
+
1115
+
1116
+
1117
+
1118
+ <h5>Type:</h5>
1119
+ <ul>
1120
+ <li>
1121
+
1122
+ <span class="param-type">number</span>
1123
+
1124
+
1125
+ </li>
1126
+ </ul>
1127
+
1128
+
1129
+
1130
+
1131
+
1132
+
1133
+
1134
+
1135
+ <h4 class="name" id="opacity"><span class="type-signature"></span>opacity<span class="type-signature"> :number</span></h4>
1136
+
1137
+
1138
+
1139
+
1140
+
1141
+ <dl class="details">
1142
+
1143
+
1144
+ <dt class="tag-source">Source:</dt>
1145
+ <dd class="tag-source"><ul class="dummy"><li>
1146
+ <a href="layer.js.html">layer.js</a>, <a href="layer.js.html#line259">line 259</a>
1147
+ </li></ul></dd>
1148
+
1149
+
1150
+
1151
+
1152
+
1153
+
1154
+
1155
+
1156
+
1157
+
1158
+
1159
+
1160
+
1161
+
1162
+
1163
+
1164
+
1165
+
1166
+
1167
+
1168
+
1169
+
1170
+
1171
+
1172
+
1173
+
1174
+
1175
+
1176
+
1177
+
1178
+
1179
+ </dl>
1180
+
1181
+
1182
+
1183
+
1184
+
1185
+
1186
+
1187
+ <h5>Type:</h5>
1188
+ <ul>
1189
+ <li>
1190
+
1191
+ <span class="param-type">number</span>
1192
+
1193
+
1194
+ </li>
1195
+ </ul>
1196
+
1197
+
1198
+
1199
+
1200
+
1201
+
1202
+
1203
+
1204
+ <h4 class="name" id="width"><span class="type-signature"></span>width<span class="type-signature"> :number</span></h4>
1205
+
1206
+
1207
+
1208
+
1209
+
1210
+ <dl class="details">
1211
+
1212
+
1213
+ <dt class="tag-source">Source:</dt>
1214
+ <dd class="tag-source"><ul class="dummy"><li>
1215
+ <a href="layer.js.html">layer.js</a>, <a href="layer.js.html#line237">line 237</a>
1216
+ </li></ul></dd>
1217
+
1218
+
1219
+
1220
+
1221
+
1222
+
1223
+
1224
+
1225
+
1226
+
1227
+
1228
+
1229
+
1230
+
1231
+
1232
+
1233
+
1234
+
1235
+
1236
+
1237
+
1238
+
1239
+
1240
+
1241
+
1242
+
1243
+
1244
+
1245
+
1246
+
1247
+
1248
+ </dl>
1249
+
1250
+
1251
+
1252
+
1253
+
1254
+
1255
+
1256
+ <h5>Type:</h5>
1257
+ <ul>
1258
+ <li>
1259
+
1260
+ <span class="param-type">number</span>
1261
+
1262
+
1263
+ </li>
1264
+ </ul>
1265
+
1266
+
1267
+
1268
+
1269
+
1270
+
1271
+
1272
+
1273
+ <h4 class="name" id="x"><span class="type-signature"></span>x<span class="type-signature"> :number</span></h4>
1274
+
1275
+
1276
+
1277
+
1278
+
1279
+ <dl class="details">
1280
+
1281
+
1282
+ <dt class="tag-source">Source:</dt>
1283
+ <dd class="tag-source"><ul class="dummy"><li>
1284
+ <a href="layer.js.html">layer.js</a>, <a href="layer.js.html#line225">line 225</a>
1285
+ </li></ul></dd>
1286
+
1287
+
1288
+
1289
+
1290
+
1291
+
1292
+
1293
+
1294
+
1295
+
1296
+
1297
+
1298
+
1299
+
1300
+
1301
+
1302
+
1303
+
1304
+
1305
+
1306
+
1307
+
1308
+
1309
+
1310
+
1311
+
1312
+
1313
+
1314
+
1315
+
1316
+
1317
+ </dl>
1318
+
1319
+
1320
+
1321
+
1322
+
1323
+ <div class="description">
1324
+ The offset of the layer relative to the movie
1325
+ </div>
1326
+
1327
+
1328
+
1329
+ <h5>Type:</h5>
1330
+ <ul>
1331
+ <li>
1332
+
1333
+ <span class="param-type">number</span>
1334
+
1335
+
1336
+ </li>
1337
+ </ul>
1338
+
1339
+
1340
+
1341
+
1342
+
1343
+
1344
+
1345
+
1346
+ <h4 class="name" id="y"><span class="type-signature"></span>y<span class="type-signature"> :number</span></h4>
1347
+
1348
+
1349
+
1350
+
1351
+
1352
+ <dl class="details">
1353
+
1354
+
1355
+ <dt class="tag-source">Source:</dt>
1356
+ <dd class="tag-source"><ul class="dummy"><li>
1357
+ <a href="layer.js.html">layer.js</a>, <a href="layer.js.html#line231">line 231</a>
1358
+ </li></ul></dd>
1359
+
1360
+
1361
+
1362
+
1363
+
1364
+
1365
+
1366
+
1367
+
1368
+
1369
+
1370
+
1371
+
1372
+
1373
+
1374
+
1375
+
1376
+
1377
+
1378
+
1379
+
1380
+
1381
+
1382
+
1383
+
1384
+
1385
+
1386
+
1387
+
1388
+
1389
+
1390
+ </dl>
1391
+
1392
+
1393
+
1394
+
1395
+
1396
+ <div class="description">
1397
+ The offset of the layer relative to the movie
1398
+ </div>
1399
+
1400
+
1401
+
1402
+ <h5>Type:</h5>
1403
+ <ul>
1404
+ <li>
1405
+
1406
+ <span class="param-type">number</span>
1407
+
1408
+
1409
+ </li>
1410
+ </ul>
1411
+
1412
+
1413
+
1414
+
1415
+
1416
+
1417
+
1418
+
1419
+
1420
+
1421
+ <h3 class="subsection-title">Methods</h3>
1422
+
1423
+
1424
+
1425
+
1426
+
1427
+
1428
+ <h4 class="name" id="_render"><span class="type-signature"></span>_render<span class="signature">()</span><span class="type-signature"></span></h4>
1429
+
1430
+
1431
+
1432
+
1433
+
1434
+
1435
+ <dl class="details">
1436
+
1437
+
1438
+ <dt class="tag-source">Source:</dt>
1439
+ <dd class="tag-source"><ul class="dummy"><li>
1440
+ <a href="layer.js.html">layer.js</a>, <a href="layer.js.html#line143">line 143</a>
1441
+ </li></ul></dd>
1442
+
1443
+
1444
+
1445
+
1446
+
1447
+
1448
+
1449
+
1450
+
1451
+
1452
+
1453
+
1454
+
1455
+
1456
+
1457
+
1458
+
1459
+
1460
+
1461
+
1462
+
1463
+
1464
+
1465
+
1466
+
1467
+
1468
+
1469
+
1470
+
1471
+
1472
+
1473
+ </dl>
1474
+
1475
+
1476
+
1477
+
1478
+
1479
+ <div class="description">
1480
+ Render visual output
1481
+ </div>
1482
+
1483
+
1484
+
1485
+
1486
+
1487
+
1488
+
1489
+
1490
+
1491
+
1492
+
1493
+
1494
+
1495
+
1496
+
1497
+
1498
+
1499
+
1500
+
1501
+
1502
+
1503
+
1504
+
1505
+
1506
+
1507
+
1508
+
1509
+
1510
+
1511
+
1512
+
1513
+
1514
+
1515
+ <h4 class="name" id="addEffect"><span class="type-signature"></span>addEffect<span class="signature">(effect)</span><span class="type-signature"> &rarr; {<a href="module-layer.Visual.html">module:layer.Visual</a>}</span></h4>
1516
+
1517
+
1518
+
1519
+
1520
+
1521
+
1522
+ <dl class="details">
1523
+
1524
+
1525
+ <dt class="tag-source">Source:</dt>
1526
+ <dd class="tag-source"><ul class="dummy"><li>
1527
+ <a href="layer.js.html">layer.js</a>, <a href="layer.js.html#line194">line 194</a>
1528
+ </li></ul></dd>
1529
+
1530
+
1531
+
1532
+
1533
+
1534
+
1535
+
1536
+
1537
+
1538
+
1539
+
1540
+
1541
+
1542
+
1543
+
1544
+
1545
+
1546
+
1547
+
1548
+
1549
+
1550
+
1551
+
1552
+
1553
+
1554
+
1555
+
1556
+
1557
+
1558
+
1559
+
1560
+ </dl>
1561
+
1562
+
1563
+
1564
+
1565
+
1566
+ <div class="description">
1567
+ Convienence method for <code>effects.push()</code>
1568
+ </div>
1569
+
1570
+
1571
+
1572
+
1573
+
1574
+
1575
+
1576
+
1577
+
1578
+
1579
+
1580
+ <h5>Parameters:</h5>
1581
+
1582
+
1583
+ <table class="params">
1584
+ <thead>
1585
+ <tr>
1586
+
1587
+ <th>Name</th>
1588
+
1589
+
1590
+ <th>Type</th>
1591
+
1592
+
1593
+
1594
+
1595
+
1596
+ <th class="last">Description</th>
1597
+ </tr>
1598
+ </thead>
1599
+
1600
+ <tbody>
1601
+
1602
+
1603
+ <tr>
1604
+
1605
+ <td class="name"><code>effect</code></td>
1606
+
1607
+
1608
+ <td class="type">
1609
+
1610
+
1611
+ <span class="param-type">BaseEffect</span>
1612
+
1613
+
1614
+
1615
+ </td>
1616
+
1617
+
1618
+
1619
+
1620
+
1621
+ <td class="description last"></td>
1622
+ </tr>
1623
+
1624
+
1625
+ </tbody>
1626
+ </table>
1627
+
1628
+
1629
+
1630
+
1631
+
1632
+
1633
+
1634
+
1635
+
1636
+
1637
+
1638
+
1639
+
1640
+
1641
+
1642
+
1643
+ <h5>Returns:</h5>
1644
+
1645
+
1646
+ <div class="param-desc">
1647
+ the layer (for chaining)
1648
+ </div>
1649
+
1650
+
1651
+
1652
+ <dl class="param-type">
1653
+ <dt>
1654
+ Type
1655
+ </dt>
1656
+ <dd>
1657
+
1658
+ <span class="param-type"><a href="module-layer.Visual.html">module:layer.Visual</a></span>
1659
+
1660
+
1661
+ </dd>
1662
+ </dl>
1663
+
1664
+
1665
+
1666
+
1667
+
1668
+
1669
+
1670
+
1671
+
1672
+
1673
+
1674
+ </article>
1675
+
1676
+ </section>
1677
+
1678
+
1679
+
1680
+
1681
+
1682
+
1683
+ </div>
1684
+
1685
+ <br class="clear">
1686
+
1687
+ <footer>
1688
+ Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Sun Oct 13 2019 15:38:43 GMT-0400 (Eastern Daylight Time) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
1689
+ </footer>
1690
+
1691
+ <script>prettyPrint();</script>
1692
+ <script src="scripts/polyfill.js"></script>
1693
+ <script src="scripts/linenumber.js"></script>
1694
+
1695
+
1696
+
1697
+ </body>
1698
+ </html>