Skip to main content
Version: 8.x.x (Active LTS)

Taking Screenshots of the Canvas

Takes a screenshot of the canvas and returns a data URL containing image data. The image data is in .png format unless otherwise specified. Enabling preserve drawing buffer within the WebGL context attributes is required in order to take a screenshot.

function takeScreenshot(
dataType?: "image/png" | "image/jpeg" | "image/webp",
quality?: number
): string | null;

Example implementation

A basic implementation could look something like this. In the following example a button is added to the Render. When it's being clicked, a high quality JPEG screenshot will be taken and opened within a new tab.

import React from "react";
import Unity, { UnityContext } from "react-unity-webgl";

const unityContext = new UnityContext({
loaderUrl: "build/myunityapp.loader.js",
dataUrl: "build/",
frameworkUrl: "build/myunityapp.framework.js",
codeUrl: "build/myunityapp.wasm",
webglContextAttributes: {
preserveDrawingBuffer: true,

function App() {
function handleOnClickTakeScreenshot() {
const data = unityContext.takeScreenshot("image/jpeg", 1.0);
if (data !== null) {, "_blank");

return (
<button onClick={handleOnClickTakeScreenshot}>Take Screenshot</button>
<Unity unityContext={unityContext} />