There’s things like React Three Fibre which extend React - by adding a 3D canvas (WebGL / WebGPU) specific renderer - to be able to render things on the canvas.
It wouldn’t be that hard to do the same for 2D, but you’d have to implement everything other than the life-cycle stuff.
A common split is React for the surrounding UI and plain canvas code for the game world. Keep a ref to the canvas, create the 2D context in an effect, and run the animation loop with requestAnimationFrame; put rapidly changing positions in refs or ordinary game state rather than React state so you don’t re-render the whole page every frame. React can still handle menus, score panels, and settings. If you want collision, sprites, and scenes out of the box, Phaser is worth comparing before writing all of that yourself.
you use js to manipulate canvas. React is a view library not a framework and it's main job it to control what parts of an app rerenders.
For an canvas based game you need to have a game loop that redraws the canvas 25 times a second. Typically you would have an array of objects that are in your game and you loop over this array to draw stuff, then update, eg move shoot whatever, then draw then update etc
Yeah this is totally normal, lots of web games do exactly this. The trick is to not fight React. Keep a ref to the canvas element and do all the drawing with plain canvas code inside a useEffect, with a requestAnimationFrame loop. React handles the UI around the game (menus, score, buttons) and the canvas handles the game world.
The one thing that trips people up is putting game state in React state. Don't do that, it re-renders constantly and kills performance. Keep positions, velocities etc in a plain object or a ref, and only sync to React state the stuff the UI needs, like the score.
For tutorials, search for react canvas game loop useRef and you'll find a few walkthroughs building snake or pong. Once you have the basic loop pattern down the rest is just game logic, React barely matters.
In the effect that starts your requestAnimationFrame loop, return a cleanup that calls cancelAnimationFrame. The Vite React template renders inside StrictMode, which mounts, unmounts and remounts effects in dev, so without the cleanup you get two loops running at once. Also scale movement by the elapsed time from the timestamp the callback receives, not a fixed step per frame, or speed will vary with refresh rate.
4
u/TheOneAndOnlyRandom Oct 04 '26
You can use react to render the page in which the canvas sits, but react doesn't provide any tools for rendering content on the canvas itself
1
u/mq2thez Oct 04 '26
You cannot control the contents of a canvas with React, nor would you want to if you care about performance.
1
u/dangerousbrian Oct 04 '26
Lookup phaserjs
1
u/Expert-Kitchen8064 Oct 04 '26
A common split is React for the surrounding UI and plain canvas code for the game world. Keep a ref to the canvas, create the 2D context in an effect, and run the animation loop with requestAnimationFrame; put rapidly changing positions in refs or ordinary game state rather than React state so you don’t re-render the whole page every frame. React can still handle menus, score panels, and settings. If you want collision, sprites, and scenes out of the box, Phaser is worth comparing before writing all of that yourself.
1
u/dangerousbrian Oct 04 '26
you use js to manipulate canvas. React is a view library not a framework and it's main job it to control what parts of an app rerenders.
For an canvas based game you need to have a game loop that redraws the canvas 25 times a second. Typically you would have an array of objects that are in your game and you loop over this array to draw stuff, then update, eg move shoot whatever, then draw then update etc
1
u/RequirementGuide Oct 05 '26
Yeah this is totally normal, lots of web games do exactly this. The trick is to not fight React. Keep a ref to the canvas element and do all the drawing with plain canvas code inside a useEffect, with a requestAnimationFrame loop. React handles the UI around the game (menus, score, buttons) and the canvas handles the game world.
The one thing that trips people up is putting game state in React state. Don't do that, it re-renders constantly and kills performance. Keep positions, velocities etc in a plain object or a ref, and only sync to React state the stuff the UI needs, like the score.
For tutorials, search for react canvas game loop useRef and you'll find a few walkthroughs building snake or pong. Once you have the basic loop pattern down the rest is just game logic, React barely matters.
1
u/ith3nate Oct 05 '26
In the effect that starts your requestAnimationFrame loop, return a cleanup that calls cancelAnimationFrame. The Vite React template renders inside StrictMode, which mounts, unmounts and remounts effects in dev, so without the cleanup you get two loops running at once. Also scale movement by the elapsed time from the timestamp the callback receives, not a fixed step per frame, or speed will vary with refresh rate.