Canvas elements not captured/bad state

Issues related to capturing or rendering Canvas elements during the visual testing process.

Since canvas elements state only exist in the page memory, Percy will serialize the current canvas elements drawing buffers as data URIs. The canvas elements are then replaced with image elements in the cloned DOM.

The image elements reference the serialized data URI and have the same HTML attributes as their respective canvas elements. The image elements also have a max-width of 100% to accommodate responsive layouts in situations where canvases may be expected to resize with JS.

Incorrect state

If your canvas element has an incorrect state or is changing states between snapshots, it’s important to ensure the page is settled before capturing a Percy snapshot. Once a snapshot is captured, the exact state of that canvas element will be serialized into an image.

WebGL canvas elements

The SDK captures the canvas element state by using the toDataURL API. This web API works by writing the state of the canvas drawing buffer and providing an image as a data URI.

WebGL canvas elements wipe the drawing buffer right after render, which is not how 2D canvas elements work. To serialize WebGL canvas elements as images, you will have to tell your canvas to preserve the drawing buffer: { preserveDrawingBuffer: true }

Reference Topic

• Percy Common - FAQs