How can you use HTML5 canvas and WebGL to create immersive mobile experiences?

1 Canvas basics

HTML5 canvas is a HTML element that allows you to draw and manipulate graphics using JavaScript. You can use it to create animations, games, charts, and more. To use canvas, you need to get a reference to the canvas element in your HTML document, and then get a context object that defines the drawing methods and properties. There are two types of context objects: 2D and WebGL. The 2D context provides basic drawing operations, such as shapes, colors, text, and images. The WebGL context provides advanced 3D graphics capabilities, such as lighting, shading, textures, and transformations.

2 Responsive canvas

To create a responsive canvas, you need to consider the size and resolution of the device screen. You can use the window.innerWidth and window.innerHeight properties to get the viewport width and height, and then set the canvas width and height accordingly. However, this may not match the device pixel ratio, which is the ratio between the physical pixels and the logical pixels. For example, a device with a retina display may have a device pixel ratio of 2, which means that one logical pixel is equivalent to four physical pixels. To account for this, you can use the window.devicePixelRatio property to scale the canvas size and the context scale. For example, if the device pixel ratio is 2, you can double the canvas size and then scale the context by 0.5.

3 Touch events

To make your canvas interactive, you need to handle touch events, such as touchstart, touchmove, and touchend. These events are similar to mouse events, but they have some differences. For example, touch events can have multiple touches, each with its own coordinates and identifiers. To access the touch information, you can use the event.touches, event.targetTouches, and event.changedTouches arrays. These arrays contain touch objects that have properties such as clientX, clientY, pageX, pageY, screenX, screenY, and identifier. You can use these properties to determine the position, movement, and identity of each touch.

4 Orientation changes

Another aspect of creating immersive mobile experiences is to adapt to orientation changes, such as switching from portrait to landscape mode. To detect orientation changes, you can use the window.orientation property or the window.onorientationchange event. The window.orientation property returns an angle that indicates the current orientation of the device, such as 0, 90, -90, or 180. The window.onorientationchange event fires when the orientation changes, and you can use it to update your canvas layout, graphics, and logic accordingly.

5 WebGL basics

WebGL is a JavaScript API that allows you to render 3D graphics on the canvas using the GPU. WebGL is based on OpenGL ES, a subset of OpenGL, which is a cross-platform standard for 3D graphics. To use WebGL, you need to get a WebGL context from the canvas element, and then create and use various objects, such as buffers, shaders, programs, textures, and uniforms. These objects are used to store and manipulate the data, logic, and parameters of the 3D graphics pipeline.

6 WebGL optimization

WebGL can create stunning 3D graphics, but it can also consume a lot of resources and affect the performance and quality of your mobile web page. To optimize your WebGL graphics, you need to consider some factors, such as the number of draw calls, the size and format of textures, the complexity and precision of shaders, and the use of extensions. For example, you can reduce the number of draw calls by using instanced rendering, batching, or sprite sheets. You can also reduce the size and format of textures by using compressed textures, mipmaps, or power-of-two textures. You can also simplify and optimize your shaders by using lowp or mediump precision, avoiding loops and branching, and using built-in functions and constants. You can also use extensions to access additional features and capabilities of the GPU, such as anisotropic filtering, depth texture, or vertex array object.

7 Here’s what else to consider

This is a space to share examples, stories, or insights that don’t fit into any of the previous sections. What else would you like to add?