What is Canvas (browser graphics)

Where it helps a business

• The first screen should show at once what a specialist or company does, with a living picture rather than a stock photo.
• You need an interactive element: a model a visitor can rotate with a finger.

How we use it

On the business-card site of Valery Afanasiev, a 3D printing and reverse engineering engineer, the first screen is a 3D scanner viewport on canvas 2D with no external libraries: three parts rotate, a scanner beam turns a point cloud into a wireframe, and the model turns with a mouse or a finger. The finance assistant draws its dashboard charts with Chart.js, which also runs on canvas.

Common problems

• The phone heats up and drains. Drawing runs only while the viewport is visible and the tab is active, the cloud is lightened to 560 points per part, at most 30 frames per second, and pixel density is capped at 1.5. By the developer's measurements, script time on the first screen is about half that of the first version.
• Data saving. With the browser's data-saver mode on, a single static frame is shown.

When you do not need it

If the graphic carries no meaning and only decorates, a light image is better: it is faster and does not drain the battery.