Contents
Which is better for game UI canvas or Dom?
When you create a UI using the canvas, it’s really easy to scale that UI with the game to fit different screen sizes. All you have to do is use CSS to scale the canvas and the UI automatically scales with it. This is where canvas based UI beats DOM based UI.
When to use canvas as a UI base?
Using Canvas as a UI base is an excellent idea if you have > 200 elements. It’s much, much faster to render than using DOM elements. On iPhone Safari, 300 animated DOM elements runs at 3fps (frames per second), very slow. If you use canvas, you can render > 300 elements and still achieve 30fps, which means smooth animation and transitions.
Which is easier to scale canvas or Dom?
All you have to do is use CSS to scale the canvas and the UI automatically scales with it. This is where canvas based UI beats DOM based UI. It is far easier to scale canvas based UI than it is to scale DOM based UI. There’s a bit more planning and complexity involved with trying to do this in the DOM.
Which is the best way to draw the Ui?
There are two primary methods for drawing UI to the screen: using the canvas to draw the UI or using native DOM elements and CSS. Everyone seems to be split on whether or not to create the UI for a game using canvas or native DOM elements. It seems the answer always gravitates towards it depends.
How to create a UI on the canvas?
The answer is to create your UI in the canvas and then save them as a spritesheet so that the DOM elements can use it as a background image. We first create the three button states in the canvas sitting side by side (outlined in red). Notice that the Button function doesn’t have any update or draw functions.
The first menu we’ll create is the main menu that players will see when they want to play the game. The menu is relatively simple, just the title and two buttons plus the background image. Since the buttons are also simple, I can create them either using the canvas or using DOM elements.