Timeline for HTML5 Canvas 100% Width Height of Viewport?
Current License: CC BY-SA 4.0
20 events
| when toggle format | what | by | license | comment | |
|---|---|---|---|---|---|
| Dec 3, 2021 at 14:24 | comment | added | jaredwilli | @Wyck you can make jsfiddle fullscreen by adding /show to the URL - jsfiddle.net/jaredwilli/qFuDr/show | |
| Dec 1, 2021 at 18:03 | comment | added | Wyck | You provided a jsfiddle, but how do I make the jsfiddle go full-screen to try it? (AFAICT I can't) Maybe this should be a stack-snippet demonstration instead of a jsfiddle? | |
| Aug 21, 2021 at 4:36 | comment | added | bytrangle | @gman: What do you recommend instead? The suggestion in your link seems to only apply to the WebGL context. | |
| Aug 21, 2021 at 4:34 | comment | added | bytrangle |
Setting display: block to the canvas makes the vertical scrollbar disappear, but can anyone explain why? I see that the canvas is already exactly the same height as the viewport.
|
|
| Jun 14, 2021 at 14:18 | history | edited | Yoav Kadosh | CC BY-SA 4.0 |
Improved formatting
|
| Feb 1, 2021 at 18:02 | history | bounty ended | Fattie | ||
| Jan 25, 2021 at 17:35 | comment | added | Fattie | @jaredwilli thanks, from a Swift programer, for the wonderful answer! cheers bra | |
| Jan 4, 2020 at 0:59 | comment | added | Kim T | This seems to work too: canvas.height = canvas.parentNode.clientHeight; canvas.width = canvas.parentNode.clientWidth; | |
| Nov 15, 2019 at 13:45 | comment | added | Roland |
If you use jQuery, use $('#canvas') instead of document.getElementById('canvas')` because the first one prevents NULL calls (error in console).
|
|
| Mar 9, 2019 at 15:15 | review | Suggested edits | |||
| Mar 9, 2019 at 17:21 | |||||
| Apr 4, 2017 at 17:19 | comment | added | SuperUberDuper | Do you really need useCapture = false? | |
| Mar 28, 2017 at 13:58 | comment | added | utdev |
Hi what does this declaration of a function mean: (function() { function inside a function?
|
|
| Oct 14, 2016 at 23:10 | comment | added | gman | This is arguably the wrong solution because it's hardcoded and inflexible. See examples here | |
| Oct 6, 2016 at 19:00 | comment | added | Félix Adriyel Gagnon-Grenier | plus one for no jQuery | |
| Dec 18, 2014 at 13:41 | comment | added | Neptilo |
display: block: Not only does this remove scrollbars, but it removes 2px from the document body's height, that are normally added under text lines inside a block. So +1 for that
|
|
| Apr 8, 2014 at 8:07 | comment | added | dooburt |
If you expect quite a lot of resizing; on a portrait/landscape device for instance, you'd want to debounce the resize otherwise you'll flood the browser.
|
|
| May 24, 2013 at 15:16 | comment | added | jaredwilli | I believe it is mainly for overriding the user stylesheet which the browser has defaults for. If you are using some kind of normalize or reset css file, this isn't necessary since that will be taken care of already. | |
| Jan 22, 2013 at 17:07 | comment | added | Kos | Why is it necessary to remove the padding and set width, height to 100%? | |
| Jul 17, 2012 at 12:55 | vote | accept | aherrick | ||
| Dec 13, 2011 at 8:40 | history | answered | jaredwilli | CC BY-SA 3.0 |