├── .gitattributes ├── .gitignore ├── LICENSE ├── README.md ├── index.html ├── main.js └── renderer.js /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | 4 | # Custom for Visual Studio 5 | *.cs diff=csharp 6 | 7 | # Standard to msysgit 8 | *.doc diff=astextplain 9 | *.DOC diff=astextplain 10 | *.docx diff=astextplain 11 | *.DOCX diff=astextplain 12 | *.dot diff=astextplain 13 | *.DOT diff=astextplain 14 | *.pdf diff=astextplain 15 | *.PDF diff=astextplain 16 | *.rtf diff=astextplain 17 | *.RTF diff=astextplain 18 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | 6 | # Runtime data 7 | pids 8 | *.pid 9 | *.seed 10 | 11 | # Directory for instrumented libs generated by jscoverage/JSCover 12 | lib-cov 13 | 14 | # Coverage directory used by tools like istanbul 15 | coverage 16 | 17 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 18 | .grunt 19 | 20 | # node-waf configuration 21 | .lock-wscript 22 | 23 | # Compiled binary addons (http://nodejs.org/api/addons.html) 24 | build/Release 25 | 26 | # Dependency directories 27 | node_modules 28 | jspm_packages 29 | 30 | # Optional npm cache directory 31 | .npm 32 | 33 | # Optional REPL history 34 | .node_repl_history 35 | 36 | # ========================= 37 | # Operating System Files 38 | # ========================= 39 | 40 | # OSX 41 | # ========================= 42 | 43 | .DS_Store 44 | .AppleDouble 45 | .LSOverride 46 | 47 | # Thumbnails 48 | ._* 49 | 50 | # Files that might appear in the root of a volume 51 | .DocumentRevisions-V100 52 | .fseventsd 53 | .Spotlight-V100 54 | .TemporaryItems 55 | .Trashes 56 | .VolumeIcon.icns 57 | 58 | # Directories potentially created on remote AFP share 59 | .AppleDB 60 | .AppleDesktop 61 | Network Trash Folder 62 | Temporary Items 63 | .apdisk 64 | 65 | # Windows 66 | # ========================= 67 | 68 | # Windows image file caches 69 | Thumbs.db 70 | ehthumbs.db 71 | 72 | # Folder config file 73 | Desktop.ini 74 | 75 | # Recycle Bin used on file shares 76 | $RECYCLE.BIN/ 77 | 78 | # Windows Installer files 79 | *.cab 80 | *.msi 81 | *.msm 82 | *.msp 83 | 84 | # Windows shortcuts 85 | *.lnk 86 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Felix Maier 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Render HTML elements into canvas 2 | 3 | A small experiment about rendering html nodes inside a canvas. 4 | You have full control about drawing, alpha channel, fps and can even apply filters and element events (e.g onClick). 5 | 6 | Use developer tools to change the content of the ```` in realtime. This is made possible by the mutation observer api, which allows to track changes on dom nodes. 7 | 8 | Files: 9 | - index.html contains an ```` code section 10 | - main.js showcase of the renderer api 11 | - renderer.js contains the actual html renderer and rasterizer 12 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 29 |
30 | 31 |
32 |
33 | 34 | 35 | 36 | 38 | 39 | -------------------------------------------------------------------------------- /main.js: -------------------------------------------------------------------------------- 1 | document.addEventListener("DOMContentLoaded", () => { 2 | 3 | let el = document.getElementById("htmlgl"); 4 | 5 | let stage = new HTMLRenderer({ 6 | alpha: 0.25, // base alpha 7 | element: el // element to render 8 | }); 9 | 10 | document.body.appendChild(stage.view); 11 | 12 | draw(); 13 | function draw() { 14 | requestAnimationFrame(draw); 15 | let ctx = stage.getContext(); 16 | stage.alpha += 0.01; 17 | stage.render(); 18 | }; 19 | 20 | window.addEventListener("resize", () => { 21 | let width = window.innerWidth; 22 | let height = window.innerHeight; 23 | stage.resize(width, height); 24 | }); 25 | 26 | window.addEventListener("mousewheel", (e) => { 27 | let x = e.deltaY > 0 ? -0.1 : 0.1; 28 | stage.scale += x; 29 | }); 30 | 31 | }); -------------------------------------------------------------------------------- /renderer.js: -------------------------------------------------------------------------------- 1 | const PIXEL_RATIO = (() => { 2 | let ctx = document.createElement("canvas").getContext("2d"); 3 | let dpr = window.devicePixelRatio || 1; 4 | let bsr = ( 5 | ctx.webkitBackingStorePixelRatio || 6 | ctx.mozBackingStorePixelRatio || 7 | ctx.msBackingStorePixelRatio || 8 | ctx.oBackingStorePixelRatio || 9 | ctx.backingStorePixelRatio || 1 10 | ); 11 | let ratio = dpr / bsr; 12 | return (ratio); 13 | })(); 14 | 15 | class HTMLRenderer { 16 | 17 | constructor(obj) { 18 | obj = obj || {}; 19 | this.ctx = null; 20 | this._alpha = obj.alpha !== void 0 ? obj.alpha : 1; 21 | this._scale = obj.scale !== void 0 ? obj.scale : 1; 22 | this.content = null; 23 | this.view = null; 24 | this.element = obj.element; 25 | this.redrawing = false; 26 | this.width = obj.width || window.innerWidth; 27 | this.height = obj.height || window.innerHeight; 28 | if (!obj.element) throw new Error("Invalid element!"); 29 | // make sure the hidden source stays invisible 30 | obj.element.style.opacity = 0; 31 | this.setupView(); 32 | this.redrawElement(); 33 | this.watchElement(); 34 | return (this); 35 | } 36 | 37 | get alpha() { 38 | return (this._alpha); 39 | } 40 | set alpha(x) { 41 | this._alpha = x; 42 | } 43 | 44 | get scale() { 45 | return (this._scale); 46 | } 47 | set scale(x) { 48 | this._scale = x; 49 | } 50 | 51 | rasterize(html, ctx, resolve) { 52 | let width = ctx.canvas.width; 53 | let height = ctx.canvas.height; 54 | let data = ` 55 | 56 | 57 |
58 | ${html} 59 |
60 | 61 | 62 | `; 63 | data = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(data); 64 | let img = new Image(); 65 | img.addEventListener("load", () => { 66 | resolve(img); 67 | }); 68 | img.src = data; 69 | } 70 | 71 | updateContext(ctx, width, height) { 72 | let canvas = ctx.canvas; 73 | canvas.width = width * PIXEL_RATIO; 74 | canvas.height = height * PIXEL_RATIO; 75 | canvas.style.width = width + "px"; 76 | canvas.style.height = height + "px"; 77 | ctx.imageSmoothingEnabled = true; 78 | ctx.webkitImageSmoothingEnabled = true; 79 | ctx.setTransform(PIXEL_RATIO, 0, 0, PIXEL_RATIO, 0, 0); 80 | } 81 | 82 | createCanvas() { 83 | let canvas = document.createElement("canvas"); 84 | let ctx = canvas.getContext("2d"); 85 | this.updateContext(ctx, this.width, this.height); 86 | return (ctx); 87 | } 88 | 89 | setupView() { 90 | let ctx = this.createCanvas(); 91 | this.ctx = ctx; 92 | this.view = ctx.canvas; 93 | this.resize(this.width, this.height); 94 | } 95 | 96 | watchElement() { 97 | let observer = new MutationObserver((mutations) => { 98 | this.redrawElement(); 99 | }); 100 | let config = { 101 | subtree: true, 102 | childList: true, 103 | attributes: true, 104 | characterData: true 105 | }; 106 | observer.observe(this.element, config); 107 | } 108 | 109 | redrawElement(resolve) { 110 | this.redrawing = true; 111 | console.log("Redraw!"); 112 | this.redraw((buffer) => { 113 | this.content = buffer; 114 | this.redrawing = false; 115 | if (resolve instanceof Function) resolve(); 116 | }); 117 | } 118 | 119 | redraw(resolve) { 120 | let html = this.element.innerHTML; 121 | this.rasterize(html, this.ctx, (buffer) => { 122 | resolve(buffer); 123 | }); 124 | } 125 | 126 | clear() { 127 | this.ctx.clearRect( 128 | 0, 0, 129 | this.width, this.height 130 | ); 131 | } 132 | 133 | getContext() { 134 | return (this.ctx); 135 | } 136 | 137 | resize(width, height) { 138 | this.width = width; 139 | this.height = height; 140 | this.updateContext(this.ctx, width*PIXEL_RATIO, height*PIXEL_RATIO); 141 | if (this.content !== null) this.draw(this.content); 142 | this.redrawElement(); 143 | } 144 | 145 | draw(buffer) { 146 | let ctx = this.ctx; 147 | let scale = this._scale; 148 | let width = this.width; 149 | let height = this.height; 150 | ctx.globalAlpha = this._alpha; 151 | ctx.drawImage( 152 | buffer, 153 | 0, 0, 154 | width|0, height|0, 155 | 0, 0, 156 | (width * scale)|0, (height * scale)|0 157 | ); 158 | } 159 | 160 | render() { 161 | if (this.redrawing === false) { 162 | this.clear(); 163 | this.draw(this.content); 164 | } 165 | } 166 | 167 | }; --------------------------------------------------------------------------------