What are the disadvantages, drawbacks and limitations of a full canvas based website over DOM based website? For example I take a wordpress website as a reference: https://www.networkrail.co.uk . What will be the difference that enduser might notice and can become a major concern?
DOM handles text better and also supports selection, highlighting, copying, screen reading, search engine optimization, browser extensions and other forms of manipulation better. We have a DOM target so that an application could use DOM where there’s a benefit and cacheAsBitmap to trigger canvas rendering for content that would not, but I think the renderer might need a little love.
1 Like
I’ve found that text can be a major performance bottleneck on a DOM-based website on lower end devices if you need to update the screen constantly (e.g. timers, HUD, etc.). Bitmap text on a canvas will almost always out-perform DOM text no matter what. You may also have better visual consistency across different browsers on canvas as opposed to DOM since there are far fewer nuances on a pixel-based canvas display.
That being said, our most recent HTML5 PC game that we shipped on Steam happened to use both canvas and DOM where it was needed. 100% of the game’s menu UI was done on the DOM while the entirety of gameplay and HUD was done on canvas. DOM UI is generally simpler to code than canvas UI since you can use a view library like React to organize the code. However the in-game UI needed to be as performant as possible for us, so the gameplay and HUD ended up being entirely canvas for the sake of lower-end PCs.
1 Like