19 ms·

It's always been you, Canvas2D

447 points by rikroots 5y ago

amelius 5y ago
> 30-40% of web pages have a <canvas> element Yes, for fingerprinting /s
- azangru 5y ago
  Pardon my ignorance, but how do you do this with canvas? I heard of using a 1x1px image for tracking purposes, but not of canvas.
  - square_usual 5y ago
    https://en.wikipedia.org/wiki/Canvas_fingerprinting https://en.wikipedia.org/wiki/Canvas_fingerprinting
    - azangru 5y ago
      Thanks
  - deleted 5y ago
    [deleted]
  - Etheryte 5y ago
    The canvas element is great for basic fingerprinting because it's practically impossible to stop it without breaking legitimate use cases. Shortly explained, there's differences between text rendering in different operating systems, browsers, and between browser versions as well. A simple fingerprint would be then to render some text, convert the canvas to an image and then hash it. Modern fingerprinting approaches combine this with a number of other sources of data (such as WebGL, available fonts, etc) to uniquely identify users.
    - brightball 5y ago
      Reminds me of evercookie.
    - seanw444 5y ago
      So stupid. You know what would be nice? If my processor didn't attempt to do a bunch of rendering and extra computation, costing more energy and wear, to spy on me. Without eliminating legitimate use cases. For now, eliminating legitimate use cases will have to do.
      - shadowgovt 5y ago
        This problem could also be solved by making the specs so rigid and implementations so constrained that none of these techniques could be used to differentiate one user agent from another. For many reasons, the lesser of two evils is probably to make user agent differentiation possible. The number of apis one has to cut out to make it impossible basically rolls HTML back to the 1.0 with no JavaScript era. Implementation details of the machine rendering a document leak through all over the place. The fact that they are allowed to vary while confirming to spec has historically been considered a feature of HTML rendering, not a bug.
      - neverartful 5y ago
        How would you prevent use of canvas? Browser plugin? Proxy filter?
  - croes 5y ago
    Fingerprinting not tracking pixel
  - XCSme 5y ago
    1x1px is for sending data to a server (by passing info in the image request URL) Canvas fingerprinting is done by generating unique(ish) strings based on slight variations in how Browsers/CPUs/GPUs render stuff.
- square_usual 5y ago
  Why /s? You're right!
  - marcosdumay 5y ago
    He's not completely right. Some of those sites have real reasons to use a canvas. He's only ~99.9% right.
    - egberts1 5y ago
      of which, /s serves us well.
- chrismorgan 5y ago
  I flat-out don’t believe feature usage statistics on the web for this kind of reason, because too many numbers are patently absurdly wrong as far as any kind of legitimate use is concerned, and so any time I see an element or attribute occurring more often than I’d expect, I just assume some widely-deployed script like Google Analytics that I almost certainly don’t want is using it, probably for fingerprinting.
- mysteryDate 5y ago
  A legitimate point! Unfortunately from our end it's also impossible to tell what canvases are being used for. Somewhat reassuringly, the vast majority canvases that are being created are much larger than would be necessary for fingerprinting, so we have some reason to believe that most uses are legitimate. There's also the fact that the vast majority of canvases never perform `getImageData`, which is an essential part of every fingerprinting technique I've ever seen. At this point it's possible to fingerprint with CSS alone, no javascript: https://css-tricks.com/css-based-fingerprinting/ https://css-tricks.com/css-based-fingerprinting/ So to say that canvas is an element "for fingerprinting" I think is an outdated notion that's the result of some bad PR the element got like 10 years ago. So, yes, fingerprinting is an issue and we all wish it would go away. Unfortunately there is a ton of work to do. A lot of very smart people are working on this and I wish them the best of luck.
  - gruez 5y ago
    >At this point it's possible to fingerprint with CSS alone, no javascript: https://css-tricks.com/css-based-fing https://css-tricks.com/css-based-fing Fingerprinting isn't a boolean state. The more fingerprinting vectors you have the more reliably you can identify users. Therefore having CSS fingerprinting (or any other fingerprinting vector) doesn't really make canvas fingerprinting less bad.
    - mysteryDate 5y ago
      True. Any data the user leaks is data the user leaks and we should work to prevent this. However I don't think people realize just how easy it is to reliably fingerprint users who are blocking javascript and canvas and other web features.
      - MomoXenosaga 5y ago
        Oh I realize. I also realize literally nobody is going to bite the hand that feeds and that this industry is never going to regulate itself.
- neverartful 5y ago
  Can you name a website that uses canvas for fingerprinting? I'm not doubting it's use for that, but would like to see a real example.
  - GlitchMr 5y ago
    Google, Facebook, Reddit, Amazon, TikTok. I entered main pages of those websites, and they tried reading pixels of an invisible canvas for whatever reason.
- donatj 5y ago
  I came here precisely to say 30-40% of websites seems remarkably high. The number of actual canvas elements used as canvases I've noted in the wild is pretty small. I've been playing with the canvas element since it was a Safari exclusive they added to make building dashboard widgets more powerful, and I can probably say the number of times I've found them actually useful in building a site is on one hand. I think you're right that most of them are probably for fingerprinting.
- deleted 5y ago
  [deleted]
rikroots 5y ago
I'll add some of my thoughts about this article's take on latest Canvas2D developments. 1. ctx.roundRect() - is a nice addition to the 2D stable of shapes, fitting alongside other recent additions like ctx.ellipse(). I was a little disappointed that the example of how to achieve this using existing functionality relied on a set of .moveTo, .lineTo and .arcTo instructions; the article misses a trick by not mentioning that we can also use an SVG path.d string to define a Path2D object and use that to fill/stroke the shape. Note: I can't find mention of .roundRect() in the MDN documentation. 2. Canvas Conic gradients have been supported in both Firefox and Safari for a while now. Good to see it arriving in Chrome. To complete the set of gradients, it would also be nice to see support for ports of the CSS repeating-linear-gradient() and repeating-radial-gradient() into the Canvas API. 3. Text modifiers - text has always been an over-simplistic mess in the Canvas2D API. In theory a user should be able to use ctx.font to load a valid CSS font string (including all the supported font size lengths, etc) and have the text rendered as expected; sadly the implementations between various browsers are all over the place. In my dreams I hope that one day we will be able to set a width/justification and have the text string broken into lines while respecting those requirements. Browsers do it already for DOM/CSS layout and rendering - I wonder how difficult it would be to tap into that functionality rather than having to reinvent it for 2D canvases? 4. context.reset() - nice! 5. Filters - SVG filters are massively powerful, yet also difficult to master. We can already build some really complex filters in SVG and reference them in the Canvas2D context; I also like the way we can add CSS filter strings to the context (eg for a nice, easy-to-understand and performant blur effect). The article mentions a `ctx.filter = new CanvasFilter([])` construction, but I can't find CanvasFilter in the MDN documentation.
- jfk13 5y ago
  > 1. ctx.roundRect() ... Note: I can't find mention of .roundRect() in the MDN documentation. https://github.com/mozilla/standards-positions/issues/519#issuecomment-859975125 https://github.com/mozilla/standards-positions/issues/519#is... raised some questions about the addition of .roundRect(); I don't know if any firm decisions have been made.
- mysteryDate 5y ago
  CanvasFilter is coming to MDN documentation, it's been a struggle... I promise it's part of the spec: https://html.spec.whatwg.org/multipage/canvas.html#filters https://html.spec.whatwg.org/multipage/canvas.html#filters
robin_reala 5y ago
Shame there was no mention of enhanced fingerprinting protection. But a nice set of Chrome improvements regardless, even if some of it is catchup.
samwillis 5y ago
Can we use these yet? ctx.createConicGradient() - 15.15% of users (Firefox since 90 and Safari since 15, not yet in Chromium/Blink without `new-canvas-2d-api` flag) https://caniuse.com/?search=createConicGradient https://caniuse.com/?search=createConicGradient Not found on "Can I Use": - All text modifiers - ctx.roundRect() - context.reset() - CanvasFilter - contextlost/contextrestored Anyone know when these will be available in browsers? Looks like in chrome they are all under the `new-canvas-2d-api` flag: https://chromestatus.com/feature/6051647656558592 https://chromestatus.com/feature/6051647656558592
- JKCalhoun 5y ago
  New is always frustrating. Instead I'll write my own context.reset_bogus() that simply calls canvas.width = canvas.width Same for round rect. Some of the other features though ... not so simple, ha ha.
- mysteryDate 5y ago
  These are all available as of Chrome M99! Thanks for reminding me to update caniuse!
  - geewee 5y ago
    What about all the other browsers?
    - mysteryDate 5y ago
      So, these functions are are now currently part of the whatwg spec, so other browsers have stated their intention to implement them and this is underway.
      - geewee 5y ago
        Wonderful!
mwcampbell 5y ago
> Rounded rectangles: the cornerstone of the internet, of computing, nigh, of civilization. That isn't wildly exaggerated if this story is true: https://www.folklore.org/StoryView.py?story=Round_Rects_Are_Everywhere.txt https://www.folklore.org/StoryView.py?story=Round_Rects_Are_...
- tannhaeuser 5y ago
  You laugh, but actually in the 90s rounded rectangles were a must to portray your site/app as "modern" (and signify you didn't bother to give it basic usability like desktop apps have so you could spare that part for your MVP).
  - tonyedgecombe 5y ago
    The funny thing is as soon as CSS supported them directly they went out of fashion.
    - Nadya 5y ago
      Same thing with gradients in forum design. The moment we could use CSS instead of a gradient handcrafted with a pirated version of Photoshop - gradients stopped being commonly used in forum skins.
      - DonHopkins 5y ago
        I would love to have a CanvasFilter that makes your smooth 24 bit procedurally generated gradients look like they've been error-diffusion dithered to an 8 bit web safe color palette. And with a FatBits option to compensate for retina displays. Now THAT would be fashionable!
        rikroots 5y ago
        > makes your smooth 24 bit procedurally generated gradients look like they've been error-diffusion dithered to an 8 bit web safe color palette Do you mean the gradient's output should look like it's been put through a risograph printer? I created a CodePen demo a while back which attempts to recreate that sort of effect - https://codepen.io/kaliedarik/pen/RwgwpyG https://codepen.io/kaliedarik/pen/RwgwpyG When it comes to reducing a palette from (potentially) millions of colors down to a set of 8 bit web safe colors - I'm not convinced such a process can generate decent output for a wide range of different inputs. I get much better results by generating a "commonest colors" palette with a minimal distance (in LAB color space) between each selected color to generate the most pleasing dithered output, whereas restricting the palette to web-safe colors limits the output to just a handful of those commonest colors. See an interactive example of the filter here: https://scrawl-v8.rikweb.org.uk/demo/filters-027.html https://scrawl-v8.rikweb.org.uk/demo/filters-027.html
mcintyre1994 5y ago
These changes look really nice! Out of interest does anyone know what the most common use cases for canvas are? The article says "30-40% of web pages have a <canvas> element" which is way higher than I'd guess. Is it used by ad networks or something like that that could increase the percentage a lot?
- ewalk153 5y ago
  > Is it used by ad networks[…]? It’s gotta be this. This article is about increasing awareness of canvas. It wouldn’t be needed if 30-40% of sites were knowingly using the tag.
- mattdesl 5y ago
  Probably the majority of these would use Canvas2D for a mix of: fingerprinting, tracking/ad tech, feature detection, font metrics, CPU rasterization & pixel manipulation. Occasionally it will be used for specific elements, games, artworks, animations, font rendering, video effects, image resizing, and sometimes entire applications (Figma, Google Docs, Google Maps, although they likely all use WebGL Canvas for performance & control).
mysterydip 5y ago
I'd like if there was a "mode 7" style affine transformation available, but I understand my needs are niche. Still, nice to see some of the performance improvements and that reset function.
- JKCalhoun 5y ago
  Had to look that one up. Seems like you could implement your own in code. It would not be fast though — having to walk each pixel in the canvas buffer, apply the transform to grab a pixel from another buffer, then assign the transformed buffer back to the canvas.
  - rikroots 5y ago
    I, too, had to look it up. This is about adding a (pseudo) perspective effect to the 2D canvas yes? There is an open issue in the whatwg/html repo[1] asking for this functionality - I have no idea whether the request will be taken forward by any browsers. The current solution is to "roll your own" functionality. It is doable - for instance I've added such functionality to my canvas library[2]. The results work, but are slower than ideal. [1] - https://github.com/whatwg/html/issues/5620 https://github.com/whatwg/html/issues/5620 [2] - https://scrawl-v8.rikweb.org.uk/demo/dom-015.html https://scrawl-v8.rikweb.org.uk/demo/dom-015.html
    - mysterydip 5y ago
      yes correct. I've seen a couple done but like you and the other poster said they're slower than ideal.
- mysteryDate 5y ago
  AHHHHHH! We wanted to add this so badly! Wrote the code and the spec and everything! Unfortunately Safari said it would be too much effort on their end to change the 2x3 matrices on the backend to 4x4 matrices to support this.
  - mysterydip 5y ago
dvh 5y ago
Is there an easy way to make canvas always fill parent while retaining 1:1 pixel size (no blur). Currently I need to use various hacks. Basically just like normal div, it currently cannot be done in canvas because once you set c.width=c.clientWidth it starts interfering, so the only solution is extra div (relative, canvas absolute) and on resize update width and height). Also it should work in flexbox.
- MildlySerious 5y ago
  I am not entirely sure if this is what you mean, on resize/orientationchange you set canvas.width and canvas.height to its clientWidth/clientHeight and redraw. Is that what you mean by hacks?
- rikroots 5y ago
  The CSS Painting API[1] shows some promise in this area - it adds a (restricted) canvas to elements which always maintains the same size as the div element it's attached to. [1] https://developer.mozilla.org/en-US/docs/Web/API/CSS_Painting_API https://developer.mozilla.org/en-US/docs/Web/API/CSS_Paintin...
- esprehn 5y ago
  There's two ways (one which you mentioned): - Use a ResizeObserver and observe a wrapper element, then resize and redraw your canvas when it notifies you. https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver https://developer.mozilla.org/en-US/docs/Web/API/ResizeObser... - Use a Paint Worklet. It hooks directly into the browser painting system, but has some limitations on what you can draw with the canvas today. https://developer.mozilla.org/en-US/docs/Web/API/PaintWorklet https://developer.mozilla.org/en-US/docs/Web/API/PaintWorkle... You could also consider SVG instead of Canvas. There's no way to automatically resize and replay draw commands but scaled up like you're asking though.
- etimberg 5y ago
  In chart.js we have a very complex solution for dealing with this. We've gone through a number of iterations, but settled on a using ResizeObserver. You also need to listen to `window.resize` to get notified about DPR changes which can happen when a browser window is dragged from one screen to another. https://github.com/chartjs/Chart.js/blob/master/src/platform/platform.dom.js#L187-L225 https://github.com/chartjs/Chart.js/blob/master/src/platform...
mattdesl 5y ago
This is great to hear! I'm an artist and much of my work builds on Canvas2D, it's a simple API and provides a nice balance of features and constraints. I'd love to see more development on Canvas2D API and standards. There's a few things that are missing and/or not yet standardized: - Advanced text metrics and more reliable text loading - More robust high-resolution rendering, for example using Canvas2D to generate large 300 DPI prints - More control over line rendering, such as placement on polygons ("inside" / "center" / "outside"), stippling, variable thickness
khalby786 5y ago
>canvas.reset() took you long enough
leeoniya 5y ago
you can do rounded rect in about 50% fewer commands vs the example. https://stackoverflow.com/questions/1255512/how-to-draw-a-rounded-rectangle-using-html-canvas/7838871#7838871 https://stackoverflow.com/questions/1255512/how-to-draw-a-ro...
londons_explore 5y ago
> Let's make sad tabs happy again! In the event that a client runs out of GPU memory or some other disaster befalls your canvas, you can now receive a callback and redraw as needed: No... this isn't how it should be. The browser should hide such details from the javascript. The canvas contents either shouldn't be lost by the GPU at all, or if they are, the browser should keep enough information to be able to recreate it (for example, a backup of all the canvas pixels plus recent draw commands executed). Lets be honest - most GPU context losses are GPU driver bugs and should just be fixed, not require every web page to try to redraw to work around them.
leeoniya 5y ago
one [more] thing i want is to be able to retain canvas context settings when resizing the canvas. e.g. it's unreasonably very expensive to re-sync the lost ctx.font on every dragged pixel - this operation alone dominates my perf profiles. i have no idea why it should be so expensive once the font is already loaded / cached in mem. ctx.fillText() is the next perf killer :( maybe i can sacrifice some quality for speed during resize with the new ctx.textRendering, though. ...and one more thing. why is there no easy inverse of ctx.clip(), e.g. ctx.mask()? currently i think it requires resorting to awkward Path2D composition/cloning + evenodd ctx.fill() hacks: https://github.com/leeoniya/uPlot/issues/628 https://github.com/leeoniya/uPlot/issues/628
- Camillo 5y ago
  Do you have a link to a Chrome bug report?
  - leeoniya 5y ago
    like a perf-related bug for ctx.font mutation? no. the actual behavior of context being reset during resize works as specced, AFAIK.
funstuff007 5y ago
when people look back at the 2020's, will they be like "Ew gradients?" That's not to say I don't like them, but I find them to be extremely overused, and making them even easier to use...
- swalls 5y ago
  And then in 2040, people will rediscover gradients and for a while they will be overused. It's just design trends.
etimberg 5y ago
Great to see conic gradients! Otherwise, you need to do solutions like https://everttimberg.io/blog/js-circular-gradient/ https://everttimberg.io/blog/js-circular-gradient/
simonsarris 5y ago
I have been building a Canvas diagramming library since 2010 (https://gojs.net https://gojs.net), if anyone has any questions about 2D Canvas use in the real-world I'd be happy to answer them. roundRect is great. Though you don't need 4 arcTo in order to make a rounded rect, you can use bezier instead (we do). Their example is also 1% amusing because they set the `fillStyle` but then call `stroke` (and not `fill`). I'll have to do some performance comparisons, since that's the operative thing for my use case (and any library author). text modifiers are very welcome. It's crazy how annoying measuring still is, especially if you want thinks to look perfectly consistent across browsers. Though the chrome dominance is making things easier in one way, I guess. context.reset is kinda funny. Most high-performance canvas apps will never want to use it. For that matter you want to set all properties as little as possible, especially setting things like context.font, which are slow even if you're setting it to the same value. (Or it was, I haven't tested that in several years). I'm sure most users know this by now, but generally for performance the fewer calls you make to the canvas and the context, the beter. This is even true of transforms: It's faster to make your own Matrix class, do all your own matrix translation, rotation, multiplication, etc, and then make a single call to `context.setTransform`, than it is to call the other context methods. One of the greatest things to happen to 2D canvas in all these years was hardware acceleration. It used to be significantly slower. (You could switch to WebGL canvas, but at a cost of complexity and all kinds of annoyances rendering text, and if you had a lot of text it often wasn't worth it.) Thinking back, I'm also a little disappointed that after the death of Flash, it felt like Canvas never really took its place. The playful web that came before it in some ways simply closed up.
- IceDane 5y ago
  Your library seems absolutely great. I can't believe I've never stumbled upon it before since I've literally gone looking for stuff exactly like this several times and never found anything very good.
  - david927 5y ago
    HN hates "me too" comments but I couldn't agree more. Absolutely stunning job. Great work. I don't know how I didn't know it existed before.
contravariant 5y ago
Now hang on for a bit, I can vaguely understand what is going wrong with the ClearRect (though why it draws a line to the bottom right when the code just moves the pencil and draws a horizontal line is beyond me) but what on earth is with: canvas.width = canvas.width; That's worse than a code smell, that reeks. Adding a new function to clear the state is nice, but what on earth is going on?
- l30n4da5 5y ago
  > That's worse than a code smell, that reeks. Welcome to webdev.
- mysteryDate 5y ago
  Yup, we're aware and we're all ashamed
- bschwindHN 5y ago
  I would guess that when a dimension is "changed" (in this case it's not changed, but it is assigned), the canvas is recreated, along with all its internal state.
- 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 ago
    Makes sense but smells like a massive oversight in the API design. Really? No "clear the bitmap" function?
batterylow 5y ago
Canvas is great - I've been using it as a fallback for those who don't want to use webgl (regl) on some of the plots on PlotAPI and PlotPanel, e.g. https://plotpanel.com/explore/view/0568f7a0-8ef8-4ef3-8bd4-b7179649b5c9 https://plotpanel.com/explore/view/0568f7a0-8ef8-4ef3-8bd4-b...
whywhywhywhy 5y ago
Still no way to properly turn off antialiasing? (All the ways you find via google don't actually work and you need to write your own drawing engine to do it properly)
- rikroots 5y ago
  Have you tried ctx.imageSmoothingEnabled (boolean) and ctx.imageSmoothingQuality (string: 'low' | 'medium' | 'high')? From my experiments the iSE value seems to be respected across modern browsers, but the iSQ appears to be ignored. There's also the ctx.smoothFont (boolean) value but I've not yet discovered a browser that cares about implementing it. Demo: https://scrawl-v8.rikweb.org.uk/demo/canvas-058.html https://scrawl-v8.rikweb.org.uk/demo/canvas-058.html
  - whywhywhywhy 5y ago
    You need that as well but it won’t make canvas draw lines and circles fully aliased. Have to completely reimplement those algorithms last time I tried.
Jyaif 5y ago
This is as pointless as adding MathML to a browser. Don't further bloat browsers. If developers need those features (which 99.9% do not), let them create and use libraries based on WebGL/WebGPU. Or rather: go ahead! The more stuff you add, the quicker a lite web (no JS/HTML, just webASM/webGPU) will emerge.
- extheat 5y ago
  Just because you don’t use the feature doesn’t mean others don’t. I use Canvas2D regularly and enjoy the simplicity of it, it is definitely one of the best features of the Web APIs.
Sawamara 5y ago
I am irrationally happy about this.
intrasight 5y ago
Does Flutter do it's rendering with Canvas2D?
- inDigiNeous 5y ago
  Flutter uses Skia, which is also the actual 2D graphics implementation behind canvas functionality in Chrome and possibly in Firefox and Safari IIRC.
fatih-erikli 5y ago
It might be off-topic but it's worth to mention, there's a Path2d API which allows you to create a path and apply it to a canvas or check whether a specified point inside that path or not. It's useful when you want to do a collision detection. Point in polygon is a well-known problem and it might be a good idea to move it to the browser's context and trust. https://developer.mozilla.org/en-US/docs/Web/API/Path2D https://developer.mozilla.org/en-US/docs/Web/API/Path2D https://en.wikipedia.org/wiki/Point_in_polygon https://en.wikipedia.org/wiki/Point_in_polygon
stupendousyappi 5y ago
I assume these are all currently non-standard APIs that Firefox will nonetheless be expected to implement? Does Firefox ever force work on the Blink team, or it is it only ever the other way around?
- dmitriid 5y ago
  and Safari. Cue in "bad browsers don't implement APIs" in 3... 2... 1...
- mysteryDate 5y ago
  These are all part of the official spec: https://html.spec.whatwg.org/multipage/canvas.html#the-canvas-element https://html.spec.whatwg.org/multipage/canvas.html#the-canva... Getting the features into the spec is the vast majority of the work. Though some features are not yet implemented in Firefox or Safari, they have both indicated their intention to do so.
  - mkl 5y ago
    The article should make that clear right at the start. I read the whole thing and came away with the strong impression that these things were Chrome-only (apart from the one mention of Firefox).
danielvaughn 5y ago
These are nice additions, but what I've always wanted is proper a proper font measurement API. Right now, in order to measure the width of a line of text (for wrapping purposes), you have to render it offscreen and measure the pixels.
- deckard1 5y ago
  yes! I went through this a few years back. My god, what a pain in the ass. According to MDN, the TextMetrics API is fully supported by all modern browsers. Chrome added the necessary height support in version 87 it looks like. But the entire API is still marked as experimental. Maybe them moving Google Docs to canvas helped that out. Chrome also introduced the Local Font Access API. Which sounds like a privacy nightmare. You can get access to the font's actual byte data and render it yourself, bypassing the browser entirely. Sounds insane to me. Imagine trying to beat your browser or OS at font rendering, but doing it in JavaScript. I guess Adobe or Figma have deep enough pockets to try though.
  - PaulDavisThe1st 5y ago
    Coming soon to a browser standards body near you: * WebHarfBuzz * WebFontConfig * WebPango Nothing radically new here, since Canvas is essentially WebCairo-with-the-good-bits-missing.
  - danielvaughn 5y ago
    The TextMetrics thing is so confusing because the docs clearly say that it's supported, but I tried to use it as recently as last year, and it's definitely not working. edit: getting access to the font bits sounds enticing to me actually, because I'm kind of a masochist :)
atum47 5y ago
I use Canvas constantly and I love it. Thanks for the hard work maintaining it.
FpUser 5y ago
>"Surprisingly, SpaceX Senior Software Engineer Sofian Hnaide revealed that all of the user interfaces on the Dragon Capsule run using Chromium, the open source backbone of the ever-popular Google Chrome internet browser." Wow, I would never expect something like this. But I guess they know better about reliability of their particular solution.
- mateo1 5y ago
  >But I guess they know better about reliability of their particular solution. I wouldn't be as sure as you are.
didip 5y ago
Say what you will about Canvas, but it is the only way to draw multiple million of points in a time series chart on a browser. SVG ain’t gonna cut it.
- mkl 5y ago
  Is Canvas2D or WebGL better for that number of elements?
  - didip 5y ago
    Doesn't WebGL draw on <canvas>?
    - TazeTSchnitzel 5y ago
      Yes but that's not Canvas2D
noelwelsh 5y ago
What I want to know (but am too lazy to look up (-: ) is do the text metrics return the width and height of the text's bounding box, or is still just one of them? Can't believe this oversight has existed for so long, but that's the way the web works. That said, I'm happy that canvas is getting some improvements. It's one of the more accessible ways to do fun things in a web browser.
theK 5y ago
What I am curious about is, is this part of a spec or are these APIs part of the proprietary Chrome Web?
- fserb 5y ago
  We don't launch anything that is not part of the spec: https://html.spec.whatwg.org/multipage/canvas.html#the-canvas-element https://html.spec.whatwg.org/multipage/canvas.html#the-canva...
wly_cdgr 5y ago
Useless additions that miss the point. The only thing Canvas2D needs is frequent and ongoing improvements to line rendering performance.
- veganhouseDJ 5y ago
  This brings Canvas up to speed with SVG as far as features no one uses.
- archerx 5y ago
  Your needs != everyone’s need, I personally couldn’t careless about improving line drawing performance for canvas.
  - wly_cdgr 5y ago
    These aren't my needs particularly. They are just canvas' main good reason for existing, as every other use case is better covered by webgl and/or CSS. Canvas is the Direct2D of the web and development of the API should focus on its unique strength - namely, on being a straightforward high level API for performant rendering of 2D primitives. No one needs garbage API clutter like rounded rectangles. What we need is performance improvements because performance improvements are not a helper function anyone can write themselves in ten minutes.
danShumway 5y ago
:) Good to see web news that appears to be at first glance just straightforwardly good news and uncontroversial. In particular, I'm really excited to see `willReadFrequently` on this list. Particularly for games, canvas caching is a huge deal. And holy crud, rounded rectangles! It doesn't fundamentally change anything, it just means I don't need to write a helper method for literally every project I make that uses them. It's a tiny thing, but I'm grateful for the people working on that.
seanalltogether 5y ago
Is this standard coordinate ordering for canvas functions? ctx.roundRect(upper, left, width, height, borderRadius); Every graphics framework I've ever worked with uses (x, y, width, height) ordering, not (y, x, width, height)
- mysteryDate 5y ago
  Oh, this is just yet another mistake we didn't catch. It's totally x before y. facepalm
dathinab 5y ago
One of the most common uses of Canvas2D on chrome is still fingerprinting.
- fserb 5y ago
  That's provably not true. The vast majority of Canvases don't do getImageData or toBlob/toDataURL/etc...
darepublic 5y ago
I appreciated the humorous tone of the article
ninkendo 5y ago
Are there any easy ways to try out drawing on a canvas in TypeScript, with full type annotations for the Canvas2D API so that I can get nice autocompletion and an easy ability to browse the API? I like the idea of creating drawings directly in javascript even for my own purposes, but it'd be great if I had a type system to help me get my code right the first time...
- robinduckett 5y ago
  https://kernhanda.github.io/tutorial-typescript-canvas-drawing/ https://kernhanda.github.io/tutorial-typescript-canvas-drawi...
- lloydatkinson 5y ago
  I was wondering the same
- moron4hire 5y ago
  It's in lib.dom.d.ts already.
agys 5y ago
A very annoying part of the Canvas API is that colors are represented as (CSS) strings, except for the pixel array, obviously. This forces to write code like this: const fillColor = `rgb(${r},${g},${b})` For the rest: long live the Canvas! <3
- mysteryDate 5y ago
  TypedOM CSSColor is coming soon!
- hmry 5y ago
  Fun tip: If you have an array of RGB you can shorten that somewhat const color = [254, 134, 29]; ctx.fillStyle = `rgb(${color})`; ctx.fillStyle = `rgba(${color},0.5)`; // I use this one pretty often
throw_m239339 5y ago
How about a native DOM Diff algorithm in the browser instead? I mean something actually useful for most front-end developers? This canvas2D stuff isn't, in the era of WebGL.
frankjr 5y ago
The old fart in me just wants a way to turn all of this off.
est31 5y ago
One canvas limitation I ran into was obtaining the height of a given piece of text. Width is available, but height is not, so you can't center some text vertically. Stack overflow tells you to use an "M" character as it has roughly the same width and height...
- xemdetia 5y ago
  This is actually a hard problem even for most font libraries as it requires 'execution' of the font and kerning to actually know the parameters. I'm not saying this is a good answer but this is a tricky problem outside just Canvas2D. E.g. sour, soup, slip, and shin are four words with different heights, how do each in turn play out? Most of the time this is external to the font library and is in the layout engine which is talking to the font rendering context the same way you are in a raw font library/canvas. To be honest this is one of the things that made web browsers and html so good is because it solves this problem really well compared to having to figure this out in native apps across languages the hard way.
- slmjkdbtl 5y ago
  Depends on your use case, in my case I'm using the font size as the height just fine, m.actualBoundingBoxAscent + m.actualBoundingBoxAscent or m.fontBoundingBoxAscent + m.fontBoundingBoxDescent also works for some cases.
- Matheus28 5y ago
  You can set the textBaseline if your intent is vertically centering it
robertoandred 5y ago
> This feature has been in Firefox for a while and we're finally making it part of the canvas spec. The Chrome team still doesn't understand that they do not define the web.
- mysteryDate 5y ago
  The spec defines the web https://html.spec.whatwg.org/multipage/canvas.html#the-canvas-element https://html.spec.whatwg.org/multipage/canvas.html#the-canva... The "we" in the statement is the maintainers of the spec, which includes engineers from Chromium, Firefox, Safari, Edge, Opera and many other stakeholders.
  - robertoandred 5y ago
    > The "we" in the statement is the maintainers of the spec Does it? You don't mention any concept of collaborating on the spec in the article, the only mention of any sort of working group is at the very end. With no context, who is "we" supposed to refer to if not the publishers of the article?
slmjkdbtl 5y ago
Admittedly, the API is a bit behind the times when it comes to state-of-the-art 2D drawing What does state-of-the-art 2D API look like?
brightffw 5y ago
oliwarner 5y ago
> 30-40% of web pages have a <canvas> element What? That seems like an outrageously high number, like an order of magnitude out. Or are we counting anything with an advert on it? Any page on a domain? Even then... A third of the internet? I'm doubtful.
- maccard 5y ago
  It's for fingerprinting
- deleted 5y ago
  [deleted]
- mysteryDate 5y ago
  This number is a little bit of a guess. It is the number of calls to `<canvas>` divided by the total number of page loads. Obviously some pages are using more than one canvas, hence the large range. As for fingerprinting, most canvases are 1. not their default size, 2. not 1x1 (like fingerprintjs uses) 3. never call `getImageData`. All these things together point to the idea that these are legitimate uses. Yes, fingerprinting on the web platform is a problem. It's also a problem with canvas. I think it's disingenuous to say "canvas is mostly used for fingerprinting" without ways to support that statement.
  - restlessdesign 5y ago
    Perhaps a better way to word that is “30-40% of page loads in last {n} {unitOfTime}”. This also jumped out at me as wildly inaccurate to the point where I felt compelled to be this guy: https://xkcd.com/386/ https://xkcd.com/386/ rather than enjoying the rest of the article ;)
    - mrdoob2 5y ago
      +1
mdswanson 5y ago
Nice to see these updates! I maintain a free/open-source Adobe Illustrator plug-in for generating Canvas drawings: https://blog.mikeswanson.com/ai2canvas https://blog.mikeswanson.com/ai2canvas
torginus 5y ago
Canvas2D is awesome, but generally speaking, when I built interactive stuff(in 2D), I either used SVG, or some library that used WebGL as a backed (even for 2D stuff), like PixiJS. That was the most reliable way to get the best performance across the largest amount of devices.
mrdoob2 5y ago
"98% of all canvases use a Canvas2D rendering context" ō_ô
- deleted 5y ago
  [deleted]
TazeTSchnitzel 5y ago
If they want to improve performance, it would be good to be able to specify a colour without invoking the CSS parser. If you animate 1000 coloured shapes at 60fps, the CSS parser is invoked 60,000 times per second. Seriously.
- fserb 5y ago
  We are on it. TypedOM for colors are coming very soon.
  - TazeTSchnitzel 5y ago
    I'm very glad to hear that!
abxytg 5y ago
Straight up, contextlost almost made me cry lol. This will allow me to deal with a huge huge huge bug in my application.
esperent 5y ago
You might notice that their claim of 98% of canvas contexts being 2d rather than 3d is completely unsourced. The reason is that the bulk is these most likely come from browser fingerprinting and a big chunk of the remainder is ads. Not something they want to highlight in this blog post.
imbnwa 5y ago
Now if only WebKit GPU acceleration would stop breaking <canvas>

447 points by rikroots 5y ago

amelius 5y ago

> 30-40% of web pages have a <canvas> element Yes, for fingerprinting /s

azangru 5y ago
Pardon my ignorance, but how do you do this with canvas? I heard of using a 1x1px image for tracking purposes, but not of canvas.
- square_usual 5y ago
  https://en.wikipedia.org/wiki/Canvas_fingerprinting https://en.wikipedia.org/wiki/Canvas_fingerprinting
  - azangru 5y ago
    Thanks
- deleted 5y ago
  [deleted]
- Etheryte 5y ago
  The canvas element is great for basic fingerprinting because it's practically impossible to stop it without breaking legitimate use cases. Shortly explained, there's differences between text rendering in different operating systems, browsers, and between browser versions as well. A simple fingerprint would be then to render some text, convert the canvas to an image and then hash it. Modern fingerprinting approaches combine this with a number of other sources of data (such as WebGL, available fonts, etc) to uniquely identify users.
  - brightball 5y ago
    Reminds me of evercookie.
  - seanw444 5y ago
    So stupid. You know what would be nice? If my processor didn't attempt to do a bunch of rendering and extra computation, costing more energy and wear, to spy on me. Without eliminating legitimate use cases. For now, eliminating legitimate use cases will have to do.
    - shadowgovt 5y ago
      This problem could also be solved by making the specs so rigid and implementations so constrained that none of these techniques could be used to differentiate one user agent from another. For many reasons, the lesser of two evils is probably to make user agent differentiation possible. The number of apis one has to cut out to make it impossible basically rolls HTML back to the 1.0 with no JavaScript era. Implementation details of the machine rendering a document leak through all over the place. The fact that they are allowed to vary while confirming to spec has historically been considered a feature of HTML rendering, not a bug.
    - neverartful 5y ago
      How would you prevent use of canvas? Browser plugin? Proxy filter?
- croes 5y ago
  Fingerprinting not tracking pixel
- XCSme 5y ago
  1x1px is for sending data to a server (by passing info in the image request URL) Canvas fingerprinting is done by generating unique(ish) strings based on slight variations in how Browsers/CPUs/GPUs render stuff.
square_usual 5y ago
Why /s? You're right!
- marcosdumay 5y ago
  He's not completely right. Some of those sites have real reasons to use a canvas. He's only ~99.9% right.
  - egberts1 5y ago
    of which, /s serves us well.
chrismorgan 5y ago
I flat-out don’t believe feature usage statistics on the web for this kind of reason, because too many numbers are patently absurdly wrong as far as any kind of legitimate use is concerned, and so any time I see an element or attribute occurring more often than I’d expect, I just assume some widely-deployed script like Google Analytics that I almost certainly don’t want is using it, probably for fingerprinting.
mysteryDate 5y ago
A legitimate point! Unfortunately from our end it's also impossible to tell what canvases are being used for. Somewhat reassuringly, the vast majority canvases that are being created are much larger than would be necessary for fingerprinting, so we have some reason to believe that most uses are legitimate. There's also the fact that the vast majority of canvases never perform `getImageData`, which is an essential part of every fingerprinting technique I've ever seen. At this point it's possible to fingerprint with CSS alone, no javascript: https://css-tricks.com/css-based-fingerprinting/ https://css-tricks.com/css-based-fingerprinting/ So to say that canvas is an element "for fingerprinting" I think is an outdated notion that's the result of some bad PR the element got like 10 years ago. So, yes, fingerprinting is an issue and we all wish it would go away. Unfortunately there is a ton of work to do. A lot of very smart people are working on this and I wish them the best of luck.
- gruez 5y ago
  >At this point it's possible to fingerprint with CSS alone, no javascript: https://css-tricks.com/css-based-fing https://css-tricks.com/css-based-fing Fingerprinting isn't a boolean state. The more fingerprinting vectors you have the more reliably you can identify users. Therefore having CSS fingerprinting (or any other fingerprinting vector) doesn't really make canvas fingerprinting less bad.
  - mysteryDate 5y ago
    True. Any data the user leaks is data the user leaks and we should work to prevent this. However I don't think people realize just how easy it is to reliably fingerprint users who are blocking javascript and canvas and other web features.
    - MomoXenosaga 5y ago
      Oh I realize. I also realize literally nobody is going to bite the hand that feeds and that this industry is never going to regulate itself.
neverartful 5y ago
Can you name a website that uses canvas for fingerprinting? I'm not doubting it's use for that, but would like to see a real example.
- GlitchMr 5y ago
  Google, Facebook, Reddit, Amazon, TikTok. I entered main pages of those websites, and they tried reading pixels of an invisible canvas for whatever reason.
donatj 5y ago
I came here precisely to say 30-40% of websites seems remarkably high. The number of actual canvas elements used as canvases I've noted in the wild is pretty small. I've been playing with the canvas element since it was a Safari exclusive they added to make building dashboard widgets more powerful, and I can probably say the number of times I've found them actually useful in building a site is on one hand. I think you're right that most of them are probably for fingerprinting.
deleted 5y ago
[deleted]

rikroots 5y ago

I'll add some of my thoughts about this article's take on latest Canvas2D developments. 1. ctx.roundRect() - is a nice addition to the 2D stable of shapes, fitting alongside other recent additions like ctx.ellipse(). I was a little disappointed that the example of how to achieve this using existing functionality relied on a set of .moveTo, .lineTo and .arcTo instructions; the article misses a trick by not mentioning that we can also use an SVG path.d string to define a Path2D object and use that to fill/stroke the shape. Note: I can't find mention of .roundRect() in the MDN documentation. 2. Canvas Conic gradients have been supported in both Firefox and Safari for a while now. Good to see it arriving in Chrome. To complete the set of gradients, it would also be nice to see support for ports of the CSS repeating-linear-gradient() and repeating-radial-gradient() into the Canvas API. 3. Text modifiers - text has always been an over-simplistic mess in the Canvas2D API. In theory a user should be able to use ctx.font to load a valid CSS font string (including all the supported font size lengths, etc) and have the text rendered as expected; sadly the implementations between various browsers are all over the place. In my dreams I hope that one day we will be able to set a width/justification and have the text string broken into lines while respecting those requirements. Browsers do it already for DOM/CSS layout and rendering - I wonder how difficult it would be to tap into that functionality rather than having to reinvent it for 2D canvases? 4. context.reset() - nice! 5. Filters - SVG filters are massively powerful, yet also difficult to master. We can already build some really complex filters in SVG and reference them in the Canvas2D context; I also like the way we can add CSS filter strings to the context (eg for a nice, easy-to-understand and performant blur effect). The article mentions a `ctx.filter = new CanvasFilter([])` construction, but I can't find CanvasFilter in the MDN documentation.

jfk13 5y ago
> 1. ctx.roundRect() ... Note: I can't find mention of .roundRect() in the MDN documentation. https://github.com/mozilla/standards-positions/issues/519#issuecomment-859975125 https://github.com/mozilla/standards-positions/issues/519#is... raised some questions about the addition of .roundRect(); I don't know if any firm decisions have been made.
mysteryDate 5y ago
CanvasFilter is coming to MDN documentation, it's been a struggle... I promise it's part of the spec: https://html.spec.whatwg.org/multipage/canvas.html#filters https://html.spec.whatwg.org/multipage/canvas.html#filters

robin_reala 5y ago

Shame there was no mention of enhanced fingerprinting protection. But a nice set of Chrome improvements regardless, even if some of it is catchup.

samwillis 5y ago

Can we use these yet? ctx.createConicGradient() - 15.15% of users (Firefox since 90 and Safari since 15, not yet in Chromium/Blink without `new-canvas-2d-api` flag) https://caniuse.com/?search=createConicGradient https://caniuse.com/?search=createConicGradient Not found on "Can I Use": - All text modifiers - ctx.roundRect() - context.reset() - CanvasFilter - contextlost/contextrestored Anyone know when these will be available in browsers? Looks like in chrome they are all under the `new-canvas-2d-api` flag: https://chromestatus.com/feature/6051647656558592 https://chromestatus.com/feature/6051647656558592

JKCalhoun 5y ago
New is always frustrating. Instead I'll write my own context.reset_bogus() that simply calls canvas.width = canvas.width Same for round rect. Some of the other features though ... not so simple, ha ha.
mysteryDate 5y ago
These are all available as of Chrome M99! Thanks for reminding me to update caniuse!
- geewee 5y ago
  What about all the other browsers?
  - mysteryDate 5y ago
    So, these functions are are now currently part of the whatwg spec, so other browsers have stated their intention to implement them and this is underway.
    - geewee 5y ago
      Wonderful!

mwcampbell 5y ago

> Rounded rectangles: the cornerstone of the internet, of computing, nigh, of civilization. That isn't wildly exaggerated if this story is true: https://www.folklore.org/StoryView.py?story=Round_Rects_Are_Everywhere.txt https://www.folklore.org/StoryView.py?story=Round_Rects_Are_...

tannhaeuser 5y ago
You laugh, but actually in the 90s rounded rectangles were a must to portray your site/app as "modern" (and signify you didn't bother to give it basic usability like desktop apps have so you could spare that part for your MVP).
- tonyedgecombe 5y ago
  The funny thing is as soon as CSS supported them directly they went out of fashion.
  - Nadya 5y ago
    Same thing with gradients in forum design. The moment we could use CSS instead of a gradient handcrafted with a pirated version of Photoshop - gradients stopped being commonly used in forum skins.
    - DonHopkins 5y ago
      I would love to have a CanvasFilter that makes your smooth 24 bit procedurally generated gradients look like they've been error-diffusion dithered to an 8 bit web safe color palette. And with a FatBits option to compensate for retina displays. Now THAT would be fashionable!
      - rikroots 5y ago
        > makes your smooth 24 bit procedurally generated gradients look like they've been error-diffusion dithered to an 8 bit web safe color palette Do you mean the gradient's output should look like it's been put through a risograph printer? I created a CodePen demo a while back which attempts to recreate that sort of effect - https://codepen.io/kaliedarik/pen/RwgwpyG https://codepen.io/kaliedarik/pen/RwgwpyG When it comes to reducing a palette from (potentially) millions of colors down to a set of 8 bit web safe colors - I'm not convinced such a process can generate decent output for a wide range of different inputs. I get much better results by generating a "commonest colors" palette with a minimal distance (in LAB color space) between each selected color to generate the most pleasing dithered output, whereas restricting the palette to web-safe colors limits the output to just a handful of those commonest colors. See an interactive example of the filter here: https://scrawl-v8.rikweb.org.uk/demo/filters-027.html https://scrawl-v8.rikweb.org.uk/demo/filters-027.html

mcintyre1994 5y ago

These changes look really nice! Out of interest does anyone know what the most common use cases for canvas are? The article says "30-40% of web pages have a <canvas> element" which is way higher than I'd guess. Is it used by ad networks or something like that that could increase the percentage a lot?

ewalk153 5y ago
> Is it used by ad networks[…]? It’s gotta be this. This article is about increasing awareness of canvas. It wouldn’t be needed if 30-40% of sites were knowingly using the tag.
mattdesl 5y ago
Probably the majority of these would use Canvas2D for a mix of: fingerprinting, tracking/ad tech, feature detection, font metrics, CPU rasterization & pixel manipulation. Occasionally it will be used for specific elements, games, artworks, animations, font rendering, video effects, image resizing, and sometimes entire applications (Figma, Google Docs, Google Maps, although they likely all use WebGL Canvas for performance & control).

mysterydip 5y ago

I'd like if there was a "mode 7" style affine transformation available, but I understand my needs are niche. Still, nice to see some of the performance improvements and that reset function.

JKCalhoun 5y ago
Had to look that one up. Seems like you could implement your own in code. It would not be fast though — having to walk each pixel in the canvas buffer, apply the transform to grab a pixel from another buffer, then assign the transformed buffer back to the canvas.
- rikroots 5y ago
  I, too, had to look it up. This is about adding a (pseudo) perspective effect to the 2D canvas yes? There is an open issue in the whatwg/html repo[1] asking for this functionality - I have no idea whether the request will be taken forward by any browsers. The current solution is to "roll your own" functionality. It is doable - for instance I've added such functionality to my canvas library[2]. The results work, but are slower than ideal. [1] - https://github.com/whatwg/html/issues/5620 https://github.com/whatwg/html/issues/5620 [2] - https://scrawl-v8.rikweb.org.uk/demo/dom-015.html https://scrawl-v8.rikweb.org.uk/demo/dom-015.html
  - mysterydip 5y ago
    yes correct. I've seen a couple done but like you and the other poster said they're slower than ideal.
mysteryDate 5y ago
AHHHHHH! We wanted to add this so badly! Wrote the code and the spec and everything! Unfortunately Safari said it would be too much effort on their end to change the 2x3 matrices on the backend to 4x4 matrices to support this.
- mysterydip 5y ago

dvh 5y ago

Is there an easy way to make canvas always fill parent while retaining 1:1 pixel size (no blur). Currently I need to use various hacks. Basically just like normal div, it currently cannot be done in canvas because once you set c.width=c.clientWidth it starts interfering, so the only solution is extra div (relative, canvas absolute) and on resize update width and height). Also it should work in flexbox.

MildlySerious 5y ago
I am not entirely sure if this is what you mean, on resize/orientationchange you set canvas.width and canvas.height to its clientWidth/clientHeight and redraw. Is that what you mean by hacks?
rikroots 5y ago
The CSS Painting API[1] shows some promise in this area - it adds a (restricted) canvas to elements which always maintains the same size as the div element it's attached to. [1] https://developer.mozilla.org/en-US/docs/Web/API/CSS_Painting_API https://developer.mozilla.org/en-US/docs/Web/API/CSS_Paintin...
esprehn 5y ago
There's two ways (one which you mentioned): - Use a ResizeObserver and observe a wrapper element, then resize and redraw your canvas when it notifies you. https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver https://developer.mozilla.org/en-US/docs/Web/API/ResizeObser... - Use a Paint Worklet. It hooks directly into the browser painting system, but has some limitations on what you can draw with the canvas today. https://developer.mozilla.org/en-US/docs/Web/API/PaintWorklet https://developer.mozilla.org/en-US/docs/Web/API/PaintWorkle... You could also consider SVG instead of Canvas. There's no way to automatically resize and replay draw commands but scaled up like you're asking though.
etimberg 5y ago
In chart.js we have a very complex solution for dealing with this. We've gone through a number of iterations, but settled on a using ResizeObserver. You also need to listen to `window.resize` to get notified about DPR changes which can happen when a browser window is dragged from one screen to another. https://github.com/chartjs/Chart.js/blob/master/src/platform/platform.dom.js#L187-L225 https://github.com/chartjs/Chart.js/blob/master/src/platform...

mattdesl 5y ago

This is great to hear! I'm an artist and much of my work builds on Canvas2D, it's a simple API and provides a nice balance of features and constraints. I'd love to see more development on Canvas2D API and standards. There's a few things that are missing and/or not yet standardized: - Advanced text metrics and more reliable text loading - More robust high-resolution rendering, for example using Canvas2D to generate large 300 DPI prints - More control over line rendering, such as placement on polygons ("inside" / "center" / "outside"), stippling, variable thickness

khalby786 5y ago

>canvas.reset() took you long enough

leeoniya 5y ago

you can do rounded rect in about 50% fewer commands vs the example. https://stackoverflow.com/questions/1255512/how-to-draw-a-rounded-rectangle-using-html-canvas/7838871#7838871 https://stackoverflow.com/questions/1255512/how-to-draw-a-ro...

londons_explore 5y ago

> Let's make sad tabs happy again! In the event that a client runs out of GPU memory or some other disaster befalls your canvas, you can now receive a callback and redraw as needed: No... this isn't how it should be. The browser should hide such details from the javascript. The canvas contents either shouldn't be lost by the GPU at all, or if they are, the browser should keep enough information to be able to recreate it (for example, a backup of all the canvas pixels plus recent draw commands executed). Lets be honest - most GPU context losses are GPU driver bugs and should just be fixed, not require every web page to try to redraw to work around them.

leeoniya 5y ago

one [more] thing i want is to be able to retain canvas context settings when resizing the canvas. e.g. it's unreasonably very expensive to re-sync the lost ctx.font on every dragged pixel - this operation alone dominates my perf profiles. i have no idea why it should be so expensive once the font is already loaded / cached in mem. ctx.fillText() is the next perf killer :( maybe i can sacrifice some quality for speed during resize with the new ctx.textRendering, though. ...and one more thing. why is there no easy inverse of ctx.clip(), e.g. ctx.mask()? currently i think it requires resorting to awkward Path2D composition/cloning + evenodd ctx.fill() hacks: https://github.com/leeoniya/uPlot/issues/628 https://github.com/leeoniya/uPlot/issues/628

Camillo 5y ago
Do you have a link to a Chrome bug report?
- leeoniya 5y ago
  like a perf-related bug for ctx.font mutation? no. the actual behavior of context being reset during resize works as specced, AFAIK.

funstuff007 5y ago

when people look back at the 2020's, will they be like "Ew gradients?" That's not to say I don't like them, but I find them to be extremely overused, and making them even easier to use...

swalls 5y ago
And then in 2040, people will rediscover gradients and for a while they will be overused. It's just design trends.

etimberg 5y ago

Great to see conic gradients! Otherwise, you need to do solutions like https://everttimberg.io/blog/js-circular-gradient/ https://everttimberg.io/blog/js-circular-gradient/

simonsarris 5y ago

I have been building a Canvas diagramming library since 2010 (https://gojs.net https://gojs.net), if anyone has any questions about 2D Canvas use in the real-world I'd be happy to answer them. roundRect is great. Though you don't need 4 arcTo in order to make a rounded rect, you can use bezier instead (we do). Their example is also 1% amusing because they set the `fillStyle` but then call `stroke` (and not `fill`). I'll have to do some performance comparisons, since that's the operative thing for my use case (and any library author). text modifiers are very welcome. It's crazy how annoying measuring still is, especially if you want thinks to look perfectly consistent across browsers. Though the chrome dominance is making things easier in one way, I guess. context.reset is kinda funny. Most high-performance canvas apps will never want to use it. For that matter you want to set all properties as little as possible, especially setting things like context.font, which are slow even if you're setting it to the same value. (Or it was, I haven't tested that in several years). I'm sure most users know this by now, but generally for performance the fewer calls you make to the canvas and the context, the beter. This is even true of transforms: It's faster to make your own Matrix class, do all your own matrix translation, rotation, multiplication, etc, and then make a single call to `context.setTransform`, than it is to call the other context methods. One of the greatest things to happen to 2D canvas in all these years was hardware acceleration. It used to be significantly slower. (You could switch to WebGL canvas, but at a cost of complexity and all kinds of annoyances rendering text, and if you had a lot of text it often wasn't worth it.) Thinking back, I'm also a little disappointed that after the death of Flash, it felt like Canvas never really took its place. The playful web that came before it in some ways simply closed up.

IceDane 5y ago
Your library seems absolutely great. I can't believe I've never stumbled upon it before since I've literally gone looking for stuff exactly like this several times and never found anything very good.
- david927 5y ago
  HN hates "me too" comments but I couldn't agree more. Absolutely stunning job. Great work. I don't know how I didn't know it existed before.

contravariant 5y ago

Now hang on for a bit, I can vaguely understand what is going wrong with the ClearRect (though why it draws a line to the bottom right when the code just moves the pencil and draws a horizontal line is beyond me) but what on earth is with: canvas.width = canvas.width; That's worse than a code smell, that reeks. Adding a new function to clear the state is nice, but what on earth is going on?

l30n4da5 5y ago
> That's worse than a code smell, that reeks. Welcome to webdev.
mysteryDate 5y ago
Yup, we're aware and we're all ashamed
bschwindHN 5y ago
I would guess that when a dimension is "changed" (in this case it's not changed, but it is assigned), the canvas is recreated, along with all its internal state.
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 ago
  Makes sense but smells like a massive oversight in the API design. Really? No "clear the bitmap" function?

batterylow 5y ago

Canvas is great - I've been using it as a fallback for those who don't want to use webgl (regl) on some of the plots on PlotAPI and PlotPanel, e.g. https://plotpanel.com/explore/view/0568f7a0-8ef8-4ef3-8bd4-b7179649b5c9 https://plotpanel.com/explore/view/0568f7a0-8ef8-4ef3-8bd4-b...

whywhywhywhy 5y ago

Still no way to properly turn off antialiasing? (All the ways you find via google don't actually work and you need to write your own drawing engine to do it properly)

rikroots 5y ago
Have you tried ctx.imageSmoothingEnabled (boolean) and ctx.imageSmoothingQuality (string: 'low' | 'medium' | 'high')? From my experiments the iSE value seems to be respected across modern browsers, but the iSQ appears to be ignored. There's also the ctx.smoothFont (boolean) value but I've not yet discovered a browser that cares about implementing it. Demo: https://scrawl-v8.rikweb.org.uk/demo/canvas-058.html https://scrawl-v8.rikweb.org.uk/demo/canvas-058.html
- whywhywhywhy 5y ago
  You need that as well but it won’t make canvas draw lines and circles fully aliased. Have to completely reimplement those algorithms last time I tried.

Jyaif 5y ago

This is as pointless as adding MathML to a browser. Don't further bloat browsers. If developers need those features (which 99.9% do not), let them create and use libraries based on WebGL/WebGPU. Or rather: go ahead! The more stuff you add, the quicker a lite web (no JS/HTML, just webASM/webGPU) will emerge.

extheat 5y ago
Just because you don’t use the feature doesn’t mean others don’t. I use Canvas2D regularly and enjoy the simplicity of it, it is definitely one of the best features of the Web APIs.

Sawamara 5y ago

I am irrationally happy about this.

intrasight 5y ago

Does Flutter do it's rendering with Canvas2D?

inDigiNeous 5y ago
Flutter uses Skia, which is also the actual 2D graphics implementation behind canvas functionality in Chrome and possibly in Firefox and Safari IIRC.

fatih-erikli 5y ago

It might be off-topic but it's worth to mention, there's a Path2d API which allows you to create a path and apply it to a canvas or check whether a specified point inside that path or not. It's useful when you want to do a collision detection. Point in polygon is a well-known problem and it might be a good idea to move it to the browser's context and trust. https://developer.mozilla.org/en-US/docs/Web/API/Path2D https://developer.mozilla.org/en-US/docs/Web/API/Path2D https://en.wikipedia.org/wiki/Point_in_polygon https://en.wikipedia.org/wiki/Point_in_polygon

stupendousyappi 5y ago

I assume these are all currently non-standard APIs that Firefox will nonetheless be expected to implement? Does Firefox ever force work on the Blink team, or it is it only ever the other way around?

dmitriid 5y ago
and Safari. Cue in "bad browsers don't implement APIs" in 3... 2... 1...
mysteryDate 5y ago
These are all part of the official spec: https://html.spec.whatwg.org/multipage/canvas.html#the-canvas-element https://html.spec.whatwg.org/multipage/canvas.html#the-canva... Getting the features into the spec is the vast majority of the work. Though some features are not yet implemented in Firefox or Safari, they have both indicated their intention to do so.
- mkl 5y ago
  The article should make that clear right at the start. I read the whole thing and came away with the strong impression that these things were Chrome-only (apart from the one mention of Firefox).

danielvaughn 5y ago

These are nice additions, but what I've always wanted is proper a proper font measurement API. Right now, in order to measure the width of a line of text (for wrapping purposes), you have to render it offscreen and measure the pixels.

deckard1 5y ago
yes! I went through this a few years back. My god, what a pain in the ass. According to MDN, the TextMetrics API is fully supported by all modern browsers. Chrome added the necessary height support in version 87 it looks like. But the entire API is still marked as experimental. Maybe them moving Google Docs to canvas helped that out. Chrome also introduced the Local Font Access API. Which sounds like a privacy nightmare. You can get access to the font's actual byte data and render it yourself, bypassing the browser entirely. Sounds insane to me. Imagine trying to beat your browser or OS at font rendering, but doing it in JavaScript. I guess Adobe or Figma have deep enough pockets to try though.
- PaulDavisThe1st 5y ago
  Coming soon to a browser standards body near you: * WebHarfBuzz * WebFontConfig * WebPango Nothing radically new here, since Canvas is essentially WebCairo-with-the-good-bits-missing.
- danielvaughn 5y ago
  The TextMetrics thing is so confusing because the docs clearly say that it's supported, but I tried to use it as recently as last year, and it's definitely not working. edit: getting access to the font bits sounds enticing to me actually, because I'm kind of a masochist :)

atum47 5y ago

I use Canvas constantly and I love it. Thanks for the hard work maintaining it.

FpUser 5y ago

>"Surprisingly, SpaceX Senior Software Engineer Sofian Hnaide revealed that all of the user interfaces on the Dragon Capsule run using Chromium, the open source backbone of the ever-popular Google Chrome internet browser." Wow, I would never expect something like this. But I guess they know better about reliability of their particular solution.

mateo1 5y ago
>But I guess they know better about reliability of their particular solution. I wouldn't be as sure as you are.

didip 5y ago

Say what you will about Canvas, but it is the only way to draw multiple million of points in a time series chart on a browser. SVG ain’t gonna cut it.

mkl 5y ago
Is Canvas2D or WebGL better for that number of elements?
- didip 5y ago
  Doesn't WebGL draw on <canvas>?
  - TazeTSchnitzel 5y ago
    Yes but that's not Canvas2D

noelwelsh 5y ago

What I want to know (but am too lazy to look up (-: ) is do the text metrics return the width and height of the text's bounding box, or is still just one of them? Can't believe this oversight has existed for so long, but that's the way the web works. That said, I'm happy that canvas is getting some improvements. It's one of the more accessible ways to do fun things in a web browser.

theK 5y ago

What I am curious about is, is this part of a spec or are these APIs part of the proprietary Chrome Web?

fserb 5y ago
We don't launch anything that is not part of the spec: https://html.spec.whatwg.org/multipage/canvas.html#the-canvas-element https://html.spec.whatwg.org/multipage/canvas.html#the-canva...

wly_cdgr 5y ago

Useless additions that miss the point. The only thing Canvas2D needs is frequent and ongoing improvements to line rendering performance.

veganhouseDJ 5y ago
This brings Canvas up to speed with SVG as far as features no one uses.
archerx 5y ago
Your needs != everyone’s need, I personally couldn’t careless about improving line drawing performance for canvas.
- wly_cdgr 5y ago
  These aren't my needs particularly. They are just canvas' main good reason for existing, as every other use case is better covered by webgl and/or CSS. Canvas is the Direct2D of the web and development of the API should focus on its unique strength - namely, on being a straightforward high level API for performant rendering of 2D primitives. No one needs garbage API clutter like rounded rectangles. What we need is performance improvements because performance improvements are not a helper function anyone can write themselves in ten minutes.

danShumway 5y ago

:) Good to see web news that appears to be at first glance just straightforwardly good news and uncontroversial. In particular, I'm really excited to see `willReadFrequently` on this list. Particularly for games, canvas caching is a huge deal. And holy crud, rounded rectangles! It doesn't fundamentally change anything, it just means I don't need to write a helper method for literally every project I make that uses them. It's a tiny thing, but I'm grateful for the people working on that.

seanalltogether 5y ago

Is this standard coordinate ordering for canvas functions? ctx.roundRect(upper, left, width, height, borderRadius); Every graphics framework I've ever worked with uses (x, y, width, height) ordering, not (y, x, width, height)

mysteryDate 5y ago
Oh, this is just yet another mistake we didn't catch. It's totally x before y. facepalm

dathinab 5y ago

One of the most common uses of Canvas2D on chrome is still fingerprinting.

fserb 5y ago
That's provably not true. The vast majority of Canvases don't do getImageData or toBlob/toDataURL/etc...

darepublic 5y ago

I appreciated the humorous tone of the article

ninkendo 5y ago

Are there any easy ways to try out drawing on a canvas in TypeScript, with full type annotations for the Canvas2D API so that I can get nice autocompletion and an easy ability to browse the API? I like the idea of creating drawings directly in javascript even for my own purposes, but it'd be great if I had a type system to help me get my code right the first time...

robinduckett 5y ago
https://kernhanda.github.io/tutorial-typescript-canvas-drawing/ https://kernhanda.github.io/tutorial-typescript-canvas-drawi...
lloydatkinson 5y ago
I was wondering the same
moron4hire 5y ago
It's in lib.dom.d.ts already.

agys 5y ago

A very annoying part of the Canvas API is that colors are represented as (CSS) strings, except for the pixel array, obviously. This forces to write code like this: const fillColor = `rgb(${r},${g},${b})` For the rest: long live the Canvas! <3

mysteryDate 5y ago
TypedOM CSSColor is coming soon!
hmry 5y ago
Fun tip: If you have an array of RGB you can shorten that somewhat const color = [254, 134, 29]; ctx.fillStyle = `rgb(${color})`; ctx.fillStyle = `rgba(${color},0.5)`; // I use this one pretty often

throw_m239339 5y ago

How about a native DOM Diff algorithm in the browser instead? I mean something actually useful for most front-end developers? This canvas2D stuff isn't, in the era of WebGL.

frankjr 5y ago

The old fart in me just wants a way to turn all of this off.

est31 5y ago

One canvas limitation I ran into was obtaining the height of a given piece of text. Width is available, but height is not, so you can't center some text vertically. Stack overflow tells you to use an "M" character as it has roughly the same width and height...

xemdetia 5y ago
This is actually a hard problem even for most font libraries as it requires 'execution' of the font and kerning to actually know the parameters. I'm not saying this is a good answer but this is a tricky problem outside just Canvas2D. E.g. sour, soup, slip, and shin are four words with different heights, how do each in turn play out? Most of the time this is external to the font library and is in the layout engine which is talking to the font rendering context the same way you are in a raw font library/canvas. To be honest this is one of the things that made web browsers and html so good is because it solves this problem really well compared to having to figure this out in native apps across languages the hard way.
slmjkdbtl 5y ago
Depends on your use case, in my case I'm using the font size as the height just fine, m.actualBoundingBoxAscent + m.actualBoundingBoxAscent or m.fontBoundingBoxAscent + m.fontBoundingBoxDescent also works for some cases.
Matheus28 5y ago
You can set the textBaseline if your intent is vertically centering it

robertoandred 5y ago

> This feature has been in Firefox for a while and we're finally making it part of the canvas spec. The Chrome team still doesn't understand that they do not define the web.

mysteryDate 5y ago
The spec defines the web https://html.spec.whatwg.org/multipage/canvas.html#the-canvas-element https://html.spec.whatwg.org/multipage/canvas.html#the-canva... The "we" in the statement is the maintainers of the spec, which includes engineers from Chromium, Firefox, Safari, Edge, Opera and many other stakeholders.
- robertoandred 5y ago
  > The "we" in the statement is the maintainers of the spec Does it? You don't mention any concept of collaborating on the spec in the article, the only mention of any sort of working group is at the very end. With no context, who is "we" supposed to refer to if not the publishers of the article?

slmjkdbtl 5y ago

Admittedly, the API is a bit behind the times when it comes to state-of-the-art 2D drawing What does state-of-the-art 2D API look like?

brightffw 5y ago

oliwarner 5y ago

> 30-40% of web pages have a <canvas> element What? That seems like an outrageously high number, like an order of magnitude out. Or are we counting anything with an advert on it? Any page on a domain? Even then... A third of the internet? I'm doubtful.

maccard 5y ago
It's for fingerprinting
deleted 5y ago
[deleted]
mysteryDate 5y ago
This number is a little bit of a guess. It is the number of calls to `<canvas>` divided by the total number of page loads. Obviously some pages are using more than one canvas, hence the large range. As for fingerprinting, most canvases are 1. not their default size, 2. not 1x1 (like fingerprintjs uses) 3. never call `getImageData`. All these things together point to the idea that these are legitimate uses. Yes, fingerprinting on the web platform is a problem. It's also a problem with canvas. I think it's disingenuous to say "canvas is mostly used for fingerprinting" without ways to support that statement.
- restlessdesign 5y ago
  Perhaps a better way to word that is “30-40% of page loads in last {n} {unitOfTime}”. This also jumped out at me as wildly inaccurate to the point where I felt compelled to be this guy: https://xkcd.com/386/ https://xkcd.com/386/ rather than enjoying the rest of the article ;)
  - mrdoob2 5y ago
    +1

mdswanson 5y ago

Nice to see these updates! I maintain a free/open-source Adobe Illustrator plug-in for generating Canvas drawings: https://blog.mikeswanson.com/ai2canvas https://blog.mikeswanson.com/ai2canvas

torginus 5y ago

Canvas2D is awesome, but generally speaking, when I built interactive stuff(in 2D), I either used SVG, or some library that used WebGL as a backed (even for 2D stuff), like PixiJS. That was the most reliable way to get the best performance across the largest amount of devices.

mrdoob2 5y ago

"98% of all canvases use a Canvas2D rendering context" ō_ô

deleted 5y ago
[deleted]

TazeTSchnitzel 5y ago

If they want to improve performance, it would be good to be able to specify a colour without invoking the CSS parser. If you animate 1000 coloured shapes at 60fps, the CSS parser is invoked 60,000 times per second. Seriously.

fserb 5y ago
We are on it. TypedOM for colors are coming very soon.
- TazeTSchnitzel 5y ago
  I'm very glad to hear that!

abxytg 5y ago

Straight up, contextlost almost made me cry lol. This will allow me to deal with a huge huge huge bug in my application.

esperent 5y ago

You might notice that their claim of 98% of canvas contexts being 2d rather than 3d is completely unsourced. The reason is that the bulk is these most likely come from browser fingerprinting and a big chunk of the remainder is ads. Not something they want to highlight in this blog post.

imbnwa 5y ago

Now if only WebKit GPU acceleration would stop breaking <canvas>