Well-deployed technologies
The HTML <canvas> element can be used to draw graphics via scripting. The element may be used to render 2D graphics through the 2D programmatic API, and 3D graphics through WebGL, a technology developed outside of W3C by the Khronos Group.
Vector graphics can also be rendered using SVG (Scalable Vector Graphics), an XML-based markup language to describe two-dimensions vector graphics. Since these graphics are described as a set of geometric shapes, they are well-suited to create interfaces that can be zoomed in/out. SVG objects can also easily be animated, enabling the creation of very advanced and slick user interfaces.
Another important aspect for games is the possibility to use the entire screen to display the user interface; the Fullscreen API allows to request and detect full screen display.
The Web Audio API provides a low latency audio processing and synthesizing API that games can use to render audio precisely. The API supports a number of features, including spatialized audio mechanisms and a convolution engine for a wide range of linear effects. A declarative approach, based on the HTML <audio> element may be used for scenarios that do not require tight controls over audio rendering, e.g. for background music.
Animations can be described declaratively via CSS Animations and CSS Transitions.
Scripted animations can be resource intensive, especially on constrained devices. The possibility offered by the Animation Frames to manage the rate of updates to animations can help to keep them under control.
Features in CSS 3 and beyond define simple yet powerful features to create graphical effects, such as rounded corners, shadow effects, and rotated content.
Various layout modes may also be used to create user interfaces that adapt to the user's device, including CSS Flexbox and CSS Grid, that make it possible to preserve a clear separation between the content itself (HTML, SVG) and its layout by allowing re-ordering of elements on screen, without having to change the underlying HTML.
Fonts play also an important role in building appealing graphical interfaces. WOFF (Web Open Font Format) makes it easy to use fonts that are automatically downloaded through style sheets, while keeping the size of the downloaded fonts limited to what the game actually needs.
Technologies in progress
The WebXR Device API specification is a low-level API that allows applications to access and control head-mounted displays (HMD) using JavaScript to create compelling Virtual Reality (VR) / Augmented Reality (AR) experiences. While the API should still be considered unstable at this stage, note main browsers implement at least a subset of it, or of the previous WebVR specification, making it possible to develop Web-based VR/AR games today.
Games will often want to impose the orientation of the screen, so that it does not change accidently while the user plays. The Screen Orientation API provides the ability to read the screen orientation type and angle, to be informed when the screen orientation state changes, and be able to lock the screen orientation to a specific state.
Animations can also be managed via scripting through the API exposed in Web Animations.
Exploratory work
Within W3C, the GPU for the Web Community Group is designing a new Web API to expose modern 3D graphics capabilities in a performant, powerful and safe manner, with a view to being agnostic of and compatible with existing native system platforms such as Direct3D, Metal, or Vulkan. Longer term, this proposal should also expose GPU computation capabilities to Web applications.
Web workers do not have access to the DOM and cannot directly render content on screen. The OffscreenCanvas interface in HTML makes it possible to create rendering context with no connection to the DOM, and in particular to do that in workers.