3 ms·

Disclaimer: not a webdev so I might be speaking nonsense. I've been reading about Canvas, it seems to get a lot of stick for not being accessible. Certainly a

Disclaimer: not a webdev so I might be speaking nonsense. I've been reading about Canvas, it seems to get a lot of stick for not being accessible. Certainly a lot of criticism for flutter web using it. When is it good and not good to use? I'm assuming games it's good for. Complete novice so looking forward to being educated. Thanks.

posterboy 4y ago
Generally speaking, it shouldn't be used to implement features that the browser ought to handle, like font support. The criticizm does not seem to apply here.
klabb3 4y ago
Canvas is for drawing shapes, primarily. It has some basic font support. The browser can’t really do much with those shapes in terms of accessibility. Perhaps zooming or increasing contrast? The cases where it makes sense are few. Also, svg support has gotten better, and is easier to use, if you need simple animations embedded within a regular, otherwise accessible page. Hope that helps.
- masswerk 4y ago
  Paths may be hit areas for UI interaction, though. I've no idea to how this translates to accessibility and if any of this can be exposed. General advice: treat it like an image. If an image is good for the job, a canvas will be as well. Otherwise, if it is essential for navigation or getting the gist of that page, you may consider complementary elements or an all together different approach. However, if there is no sense in an alternative representation (like in the case of an arcade-style game), this type of content should be still allowed.
beebeepka 4y ago
Canvas is an HTML element for drawing graphics. It's by far the fastest way to draw and animate lots and lots of things. 2d/3d, it's all the same. Performance is not free, though. It eats CPU cycles for breakfast if you let it. And as you were told - you cannot edit it as it's a canvas, not a document. The reason it's faster is because it is designed for that sort of thing, whereas web pages are meant to be mostly static, which is a good thing. Different use cases
tantalor 4y ago
It has nothing to do with canvas. There's no reason a game like this couldn't be implemented with regular html elements & CSS, but that would do nothing to make it "accessible".

posterboy 4y ago

Generally speaking, it shouldn't be used to implement features that the browser ought to handle, like font support. The criticizm does not seem to apply here.

klabb3 4y ago

Canvas is for drawing shapes, primarily. It has some basic font support. The browser can’t really do much with those shapes in terms of accessibility. Perhaps zooming or increasing contrast? The cases where it makes sense are few. Also, svg support has gotten better, and is easier to use, if you need simple animations embedded within a regular, otherwise accessible page. Hope that helps.

masswerk 4y ago
Paths may be hit areas for UI interaction, though. I've no idea to how this translates to accessibility and if any of this can be exposed. General advice: treat it like an image. If an image is good for the job, a canvas will be as well. Otherwise, if it is essential for navigation or getting the gist of that page, you may consider complementary elements or an all together different approach. However, if there is no sense in an alternative representation (like in the case of an arcade-style game), this type of content should be still allowed.

beebeepka 4y ago

Canvas is an HTML element for drawing graphics. It's by far the fastest way to draw and animate lots and lots of things. 2d/3d, it's all the same. Performance is not free, though. It eats CPU cycles for breakfast if you let it. And as you were told - you cannot edit it as it's a canvas, not a document. The reason it's faster is because it is designed for that sort of thing, whereas web pages are meant to be mostly static, which is a good thing. Different use cases

tantalor 4y ago

It has nothing to do with canvas. There's no reason a game like this couldn't be implemented with regular html elements & CSS, but that would do nothing to make it "accessible".