Last active
June 9, 2020 07:16
-
-
Save iampava/3921e669b69d17c6ea44192dbff08415 to your computer and use it in GitHub Desktop.
Offscreen Canvas width limitation?
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| At this canvas width, the normal one gets rendered but the offscreen one is still empty. | |
| However, if you change this to a lower number both will work. | |
| */ | |
| const WIDTH = 20000; | |
| const [firstCanvas, secondCanvas] = document.querySelectorAll('canvas'); | |
| firstCanvas.width = WIDTH; | |
| secondCanvas.width = WIDTH; | |
| const offscreen = secondCanvas.transferControlToOffscreen() | |
| const worker = new Worker('/worker.js'); | |
| worker.postMessage({ | |
| key: 'CANVAS', | |
| payload: { | |
| canvas: offscreen | |
| } | |
| }, [offscreen]) | |
| drawOnCanvases(); | |
| function clearCanvases() { | |
| worker.postMessage({ key: 'CLEAR' }) | |
| firstCanvas.getContext('2d').clearRect(0, 0, firstCanvas.width, firstCanvas.height) | |
| }; | |
| function drawOnCanvases() { | |
| worker.postMessage({ key: 'DRAW' }) | |
| const firstCtx = firstCanvas.getContext('2d') | |
| firstCtx.fillStyle = 'red' | |
| firstCtx.fillRect(0, 0, firstCanvas.width, firstCanvas.height / 2) | |
| }; | |
| // In case you wanna interact with it from the Browser Console | |
| window.clearCanvases = clearCanvases | |
| window.drawOnCanvases = drawOnCanvases |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <title>Offscreen Canvas width limitation???</title> | |
| <style> | |
| canvas { | |
| border: 5px solid navy; | |
| margin-bottom: 50px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <canvas height="48"></canvas> | |
| <canvas height="48"></canvas> | |
| <script src="app.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| let canvas; | |
| onmessage = function (evt) { | |
| switch (evt.data.key) { | |
| case 'CANVAS': | |
| canvas = evt.data.payload.canvas | |
| break | |
| case 'CLEAR': | |
| canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height) | |
| break | |
| case 'DRAW': { | |
| const ctx = canvas.getContext('2d') | |
| ctx.fillStyle = 'red' | |
| ctx.fillRect(0, 0, canvas.width, canvas.height / 2) | |
| break | |
| } | |
| default: | |
| break | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Tested on the latest versions of Chrome (including Canary) and Edge. On the latest Firefox Nightly, after turning on
gfx.offscreencanvas.enabledstill crashes. I guess it's not implemented there.