Search code examples
javascriptuser-interfacehtmldomcanvas

Does it make sense to create canvas-based UI components?


While DOM still totally dominates the way we create UIs, does it make sense to create a bunch of entirely canvas-based UI components, like buttons, lists, horizontal/vertical groups, etc?

I know for sure that there will be a lot of drawbacks, but what would the possible advantages of such be?

For one, I'd say in general the visual integration with canvas will be much tighter.


Solution

  • Yes and no.

    In terms of accenting the UI of the page, it's somewhat ideal if the page navigation and operation can also work well if JavaScript is not enabled.

    It is okay to have UI elements that are prettified by canvas, but remember that these elements will not be accessible to web crawlers (like Google), or to users who have scripts disabled.

    No:

    Don't try to remake text editing in canvas. Even the HTML Canvas Spec has a section where they strongly advise against trying to create text-editing controls in Canvas.

    There's a long history of trying to do that and failing (look up Mozilla Bespin)

    I know for sure that there will be a lot of drawbacks, but what would the possible advantages of such be?

    Yes:

    Visualizations (that have no fallback except text description) and controls like dials (that fall back to some HTML, like input type="range" sliders) can be greatly enhanced with Canvas.

    If you search for canvas controls, canvas diagrams, canvas charts, etc you'll find a lot of libraries that offer stuff like this. Just understand very well that many of these come at the expense of accessibility.

    Maybe:

    There are a lot of pretty elements you can add to a page with Canvas. Some things can get really beautiful without being intrusive or altering the page navigation in any way. Perhaps the logo of a website would "grow" procedurally or glow or otherwise get more complex. Other background animation effects might be really neat.

    There are also interactive images, like on sites where you want a diagram or breakdown or exploded view that you would navigate to inspect the various parts of something (a chemical structure, a biological organism, a new car). Visual interactive media such as diagramming and games are some of the best use-cases for Canvas.