4 ms·
I was curious also, so went looking. Here are some relevant stackoverflow questions: [1], [2]. Basically, setting the width of the canvas to any value different
by proto-n 5y ago
I was curious also, so went looking. Here are some relevant stackoverflow questions: [1], [2]. Basically, setting the width of the canvas to any value different than the current width clears the canvas, because it forces the browser to re-allocate the relevant bitmap. Current implementations don't check if the width value is different, just re-allocate the bitmap anyways. Hence the trick.
[1] https://stackoverflow.com/questions/17522134/how-does-canvas-width-canvas-width-work-internally https://stackoverflow.com/questions/17522134/how-does-canvas...
[2] https://stackoverflow.com/questions/2142535/how-to-clear-the-canvas-for-redrawing https://stackoverflow.com/questions/2142535/how-to-clear-the...
- resonious 5y agoMakes sense but smells like a massive oversight in the API design. Really? No "clear the bitmap" function?
- SQueeeeeL 5y agoWeb dev is full of this kind of oversight (not defending it, it just has a lot of precedence)
- jakelazaroff 5y agoThere is now! Why it took so long is anyone’s guess.
- greggman3 5y agothere is clearRect
- resonious 5y agoRight! But given the mysterious pink line that appears after drawing again (per the article), it seems that clearRect does something else.
- shadowgovt 5y ago> Current implementations Yikes on a bike. Shit like this is how we end up with `typeof null === 'object'` forever baked into the spec.
- easrng 5y agoand things like > typeof document.all < "undefined" > document.all.constructor < HTMLAllCollection
- Matheus28 5y agoThat's a neat one! Never knew about it
- ninkendo 5y agoThings like this are to be expected if you truly value "never break anyone, ever, even if everyone unanimously agrees something is bad" as an immutable goal of your software. Programming languages are especially important for this sort of philosophy... If you make a mistake and people rely on it, your mistake is now part of the way the language works, always and forever. My hot take: Software that doesn't take this approach isn't truly serious in the same way as software that does. Personally I'm glad for this level of discipline because at some point, there has to be a "bottom"... software that we have to rely on in order to make our own code work. Not everything gets to enforce deprecation/removal cycles, sometimes it just has to Always, Always Work.
- shadowgovt 5y agoTotally agree. I think it's way too late to change out the behavior of `typeof`, but Canvas2D is young enough that it might be great if one or more browsers removed that optimization and didn't cause width = width to blank the canvas contents, so that people didn't come to rely on a bad API to solve a problem that has nothing to do with canvas width. ... of course, that would require extending the API with an actual blanking function...
- jdashg 5y agoLook first to the spec! The spec says don't check if different for canvas2d: https://html.spec.whatwg.org/multipage/canvas.html#concept-canvas-context-mode https://html.spec.whatwg.org/multipage/canvas.html#concept-c... > Whenever the width and height content attributes are set, removed, changed, or redundantly set to the value they already have, then the user agent must perform the action from the row of the following table that corresponds to the canvas element's context mode. > | 2d | Follow the steps to set bitmap dimensions to the numeric values of the width and height content attributes. | > When the user agent is to set bitmap dimensions to width and height, it must run these steps: > 1. Reset the rendering context to its default state. > 2. Resize the output bitmap to the new width and height. There's opportunity to reuse the previous surface and just clear the contents, but I'm not sure if this is done. (But the reset of state and clear are both mandatory for `.width=.width`)