Skip to main content
Transform your testing process with: Company-wide Licences, Test Observability & App Percy
No Result Found

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

We're sorry to hear that. Please share your feedback so we can do better

Contact our Support team for immediate help while we work on improving our docs.

We're continuously improving our docs. We'd love to know what you liked





Thank you for your valuable feedback

Is this page helping you?

Yes
No

We're sorry to hear that. Please share your feedback so we can do better

Contact our Support team for immediate help while we work on improving our docs.

We're continuously improving our docs. We'd love to know what you liked





Thank you for your valuable feedback!

Talk to an Expert
Download Copy Check Circle