Canvas2D is getting an update
Вставка
- Опубліковано 23 сер 2024
- Your good, old friend the Canvas2D API has been improving and is worth another look. Hear about all the new features that have been added to the spec.
Resources:
Github → goo.gle/39Acp9i
Speaker: Aaron Krajeski
Watch all Chrome Developer Summit sessions here → goo.gle/cds20-...
Subscribe to Google Chrome Developers here → goo.gle/Chrome...
#chromedevsummit #chrome #Canvas2D
event: Chrome Dev Summit 2020; re_ty: Publish; product: Chrome - General; fullname: Aaron Krajeski;
The best Google presentation.
What about accessibility? That's the number one reason I don't use canvas and prefer the DOM
I agree that Canvas is not yet where the DOM in terms of accessibility. Unfortunately it's a difficult problem. Is there anything specifically you most need? Like a screen reader?
I know some PWAs that use canvas maintain a sort of "shadow DOM" for accessibility and SEO reasons. Google Docs does this, for example.
@@aaronkrajeski3382 thanks for responding to my comment. Great video BTW.
Yes, screen reader accessibility is the main reason I dismiss the canvas for any application I work on. I have not heard before of the clever parallel DOM, that is hidden from view. For the budget of the projects I work on building the parallel DOM when using the canvas would be out of the question. Though I guess I'm not one of the people working on niche products or features that require the canvas.
Another feature I would desire is an easy way for the user to select text. You could probably achieve that with a shadow dom over top of the canvas.
My solution is to to have a aria-label and contenteditable="true" on the canvas element. This will inform the screen reader that the canvas is interactive/focusable and will read the aria-label - which has instructions on how to activate a "reader mode" where my solution uses the Web Speech API and allows interacting with the Canvas using only your keyboard.
I wish Chromium would have a built in English model for SpeechRecognition. It was really sad when Chrome \*deprecated SpeechRecognition when I had made a speech interface where you could talk to my app. (* SpeechRecognition suddenly one day stopped working, might have been black-listed for overloading Google servers - so having the model on the client could help). Besides SpeechRecognition support I would like to be able to render different parts of the canvas in Web workers. Sending the context to each worker has too much oeverhead though so it's not useful unless you could cheaply share the canvas. Also I would like the Canvas to support higher framerate/fps. so that interaction can feel snappier. (from keyboard button push to canvas render).
He's so passionate! It's amazing
I might actually give it a go now. Great presentation and great slides. Very thoughtful and sliiiick
Loved the humor (and great explanation of the new features). #chromecares
I would really love to see native text wrapping (multiline) support in canvas, i know there is measureText() function which we can use but a native solution would be cool! :D
Oh geez, you and me both. It's unfortunately a really difficult feature to implement and we are NOT trying to re-create the DOM in Canvas. I wouldn't hold your breath, unfortunately.
github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Canvas/FormattedText.md
@Aaron Krajeski Thanks for introducing new features. I am big fan of canvas 2D, using extensively from last 4 years. Build a whole live classroom experience using canvas.
Awesome! Do you have any blogs/sites/videos you'd like to show off?
#outofcontext
Why is this comment timestamp stated as 1 week ago?The video was just posted a few hours ago.
@@beater_y363 magic
@@beater_y363 It was unlisted for a while.
Fabulous! Aaron, don't hold yourself back. Looking forward to a musical about SDP negotiation in WebRTC.
I'd get right to it if I knew anything about SDP negotiation in WebRTC!
Thank you for addressing "width = width" !
This is incredible! What can be better for a person, who works with canvas all day long:) Thank you!
The main reason I tend to use DOM elements over Canvas whenever possible is ease of input handling. If I make a DOM button, I can just add a click event handler to it and be good. If I draw a button on a canvas, now I have to implement my own checking for whether the mouse is over the button, whether there's something else drawn on top of it or not, etc. And when the button isn't a simple rectangle, that's even more convoluted to calculate.
It'd be nice if Canvas2D could have some kind of "elements API" using effectively subcontexts; something like this:
const myButton = ctx.createSubcontext(some_width, some_height);
myButton.arc(...);
myButton.addEventListener('contextclick', e => console.log('Clicked element with mouse at position relative to canvas: ', e.canvasX, e.canvasY, ' and element drawn at ', e.contextX, e.contextY));
ctx.drawSubcontext(myButton, x, y);
And then events would be handled on every copy of the subcontext drawn. (I used contextclick instead of just click because these events should have information relative to the drawn context rather than the DOM, so new event types. Also, if "drawSubcontext" feels like it shouldn't be handling input, then maybe rename the method "includeSubcontext" instead?)
If we want to get really fancy, the createSubcontext method could take an optional third boolean parameter, "calculateBounding", which when true (defaulting to false) will only respond to mouse events on non-transparent pixels of the subcontext, and drawSubcontext/includeSubcontext could take an optional fourth boolean parameter, "respectDepth" (defaulting to true), that when true will cancel mouse events from the subcontext if any non-transparent pixels are drawn on top of it at the mouse's position. This way you have the extra flexibility of setting it to false to allow you to handle clicks/etc. even when you draw over it -- which, btw, paves the way for fully custom invisible hitboxes! :)
There are lots of libraries that comes with these features but I definitely understand what you mean. I honestly can't imagine how the syntax would be for better input handling since everything is based on the x and y coordinates. We'll see what happens in the future 🙌
That was really the best presentation... Really loved it...
Hope that Multiline Textateas with line height will work. Or even text overflow ellipsis.
This would be huge. And vertical aligned text in a given context..
I'm getting some "Nathan For You" vibes, except the stuff being said here is actually useful
You are not at all the first person to tell me I look like Nathan Fielder 😂
That's some really great work! I'm interested if the SVG filters are specced in an algorithmicly exact way? I tried using SVG & SVG filters to use a depth map (greyscale 16-bit jpeg) to mask a 2d render of a 3d scene, to try to implement object occlusion in to fake 3d backgrounds in the past. I found it worked really well, but every browser had slightly different implementations of the filters, or perhaps, every browser was decoding jpegs slightly differently, or something to do with colour spaces? In the end I gave up on the approach, the responses of the filters didn't seem perfectly linear, even when colour profiles seemed to be accounted for. I could have build a dataset of browsers and their offsets and tried to calibrate the filter response to each browser, or perhaps built a calibration system that could test the browser it's running in and adjust to it, but it all seemed far too complicated to get working. For these sorts of advanced effects, i'd love to see the whole filter stack in Canvas (and SVG!) updated to have very precise implementations, and to be tested across browsers to have pixel perfect exact output when using images that don't have a colour space assigned, so images can be more easily used as a form of data to inform filters and masking.
In the end, I settled on using a javascript implementation of a PNG decoder, and doing it all in JS, inside a paint worklet where they're available. It works reliably, and by avoiding the browser's image codecs and filters, I get consistent behaviour across all browsers, at a performance cost.
It would be epic if we are able to apply post-processing effects on the canvas. I tried making a 'bloom' kind of effect using the property 'shadowBlur' but it is not always that efficient.
you probably can,
with Vulkan or DX9/DX11 "Angle" flag and (!) ReShade
@@IvaWing Yea but I just want it in-built you know? Just more support for GPU's to create cooler graphics
Big Problem in a lot of cases is SEO
Ok I've been in a long loving relationship with The Canvas2D. Now that's aside, This Presentation style is Fire🔥🔥🔥.
This sounds amazing!
Yes we can-vas ! Wouhou looks nice :)
We love you too Canvas :)
Rounded rectangles are nice, but we really want smooth rounded rectangles
Finally a way to change color without a smelly string. Yay arrays!
really great presentation !!!
Some use cases for Canvas2D would be nice.
Are you joking? Canvas2D is used my millions of games on the web and is basically the only choice unless you want to learn WebGL and shaders. I’m using it for an interactive web application I’m working on right now. There are tons of use cases for Canvas2D…
@@Nick-kb2jc Calm down, I didn’t claim there are none, I legit wanted some concrete use cases. Thanks for some examples. Did you invent Canvas2D or why did you get this defensive? Lol
@@taskforce_kerim Lol my bad didn’t mean to get defensive, I’d just never heard someone ask for Canvas use cases before. It’s the most widely used graphics API on the web. Thought everyone knew that, especially if it’s someone who’s into tech enough to watch a Google tech talk.
@@Nick-kb2jc Yeah, I mean I know it’s the THE graphics API but the only use case that I could come up with on the spot is making games. But even those have kind of moved to WebGL so Canvas2D is this middle thing between the regular DOM and WebGL and I just don’t encounter many “pure” Canvas2D examples. Know of some cool sites using Canvas2D extensively?
Nice ! Is there a polyfill to emulate the new API on older browsers ?
... "contextLost", redraw) - The best part. Thank You!
I love Canvas!
4:56 makepad.dev disagrees
Extremely cool!
Rust in the browser? With live reloading?? Wow.
My concerns about using canvas:
- low-level API;
- missing some basic HTML features, like line wrapping and hover events;
- accessibility.
Otherwise, it's all good but most of the time I don't need a programmatic interaction - declarative would be the way.
A question: will those new methods be added to Houdini's Paint worklets too?
Great !!!❤️
Friendly neighborhood Canvas2D
how about text measurement / metrics and font-fallback information? currently there is no way to know whether a font is available and when it is replaced which font is used by the browser. we need accurate way to measure the size of text before rendering it instead of having to use a hidden DIV element. And finally, render html into canvas instead of resorting to various hacks or hand-coding it.
I've been tinkering about with hexagonal grids in the DOM, but perhaps canvas is actually more suited for what I want to do..
Accessibility?
OMG this presentation is puntastic!
God bless this. God bless it.
Why is there no documentation on this? and why doen't vscode know these new functions
Is there any tools available to help make shapes on a canvas? How are you supposed to know the different lines, curves, etc. Trial and error? Is there a Adobe illustrator or SVG to canvas plugin?
I am definitely in the category of someone who avoided using canvas unless I had to use it. Using code to create graphics/shapes just seems super tedious. I would rather use SVG and CSS Animations/Transforms. I will give Canvas2d another try for a project requiring an interactive graphic coming up.
CANVAS! CANVAS! CANVAS!
The story-telling was "different", I'm not sure it was a value add though, but it's worth experimenting on different ways to communicate and storytelling is very powerful... It was very cool to hear someone being excited about Canvas2d! Available everywhere is it's killer feature! (So you need to be careful not to break backwards/forward compatibility). I think what Canvas2 needs most is better performance. For example rendering 100 characters one character each is much slower then rendering 100 characters in one call! (but as I did try to implement my own bitmap font renderer I wasn't able to beat the built in one. So I guess it's not that easy... Maybe if you could specify beforehand which background colors will be used it could (metaphorically) "warm up" the text rendering engine)
We love you canvas :-)
Textually explicit content ayee
Button refactor everyone. Gather round...
I wonder, if these improvements are happening because of flutter ?
Woo 4x4 matrix transform support.
Wonderful!
Amazing presentation
i like canvas
I don't get it. Why sometimes Ronda, sometimes Rhonda? Confusing.
Ooooooooooops!
If I was very smart I would come up with some kind of post-hoc rationality for that, but it's just a typo. I think "Rhonda"s better because it looks like "Rhombus"? Idk
So can i make text easily selectable now?
Hello, i have a problem and i dont really know how to fix it, normally when you go on google you have that litte button with a pen on the bottom right corner i had it yesterday, but today it gone i turned off my computer alot of times i tried looking for videos on youtube but found nothing please can someone help?
Use Edge instead xD
Turning off antialiasing would be nice feature. Draw Point function instead of drawing 1x1 rectangles. Normal circle drawing function instead of complicated math drawarc function.
You can turn off antialiasing (and have been able to for years!) context.imageSmoothingEnabled = false
@@A.D.G but it's for image scaling smoothing. I mean antialiasing for strokes.
"For some reason my script writting career never took off"😂😂😂😂😂😂😂😂😂😂😂
Use Canvas+WebSocket to replace Vue/React and fetch/Ajax ....
It will provide amazing inference...
How?
That is called VNC 😂
Is willReadFrequently already in stable chrome?
Yes, but behind the flag.
@@aaronkrajeski3382 when do chrome plan to remove it from being hidden behind flag, so users can use it by default?
@@jeblincoln9032 Absolutely! Mid 2021 is the plan.
Did I just watch this?
SEO?
matrices: Three.Canvas2DRenderer anyone?
We need am easy way to make canvas responsive
Man, web APIs these days are supported by Electrode before they're supported by IE. And with all the bugs in Electrode, it's always self-destructing, so that says something about how bad IE is! 😂
good effort, but still not convinced to use canvas, sorry
Flutter web use canvas2d
Would be interesting to know how this affects Flutter Web :)