Skip to main content
Version: Current

Getting the Canvas Reference

The ref provides a way to access the Unity Application's Canvas element created in the render method.


Even though it is possible to access the Canvas element directly using the ref, it is not recommended to do so. Try to use the built-in Unity Context API functions instead. If something is not working properly, or you're missing functionality, please consider opening an issue, discussion or a pull request.

Type Definition

Type Definition
<Unity ref={RefAttributes<HTMLCanvasElement>} />


The reference of the Unity Application's Canvas element is provided as a prop using a forwarded ref. To access the Canvas element, simply create a ref and pass it to the Unity component.

Example: Using a ref hook to store the reference
const canvasRef = useRef(null);
Example: Store the reference in the hook
<Unity ref={canvasRef} />

Example Usage

A basic implementation could look something like this. In the following example we'll use a ref hook to store the reference to the Unity Application's Canvas element. We'll then add a button which will focus the canvas when clicked.

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

function App() {
const { unityProvider } = useUnityContext({
loaderUrl: "build/myunityapp.loader.js",
dataUrl: "build/",
frameworkUrl: "build/myunityapp.framework.js",
codeUrl: "build/myunityapp.wasm",

const canvasRef = useRef(null);

function focusCanvas() {
if (canvasRef.current) {

return (
<Unity unityProvider={unityProvider} ref={canvasRef} />
<button onClick={focusCanvas}>Focus Canvas</button>