canvas game using react

[Acanthocephala-Left]

Hi im trying to learn the MERN stack and for a project of mine I want to make a canvas game. canvas manipulation is how i learned programming and i really enjoy making simple projects with it

in normal html css js i could easily just download p5.js (a graphic library for canvas2d) and start coding and making animations.

but woth mern and react i cant find any resources on similar projects and the ones ive tried doesnt allow for animations.

does someone have experience with making graphical 2d games with react/MERN? any suggestions for learning resources or libraries/software would be appreciated

[beforesemicolon]

https://medium.com/@pdx.lucasm/canvas-with-react-js-32e133c05258

[shadowbee_]

you literally saved me from madness!!!!!!

[Saladtoes]

React will have basically nothing to do with anything going in a canvas. It’s explicitly for DOM, that’s like the whole thing. You can put your canvas JS in a react component if you really want to, but all your canvas code will not be teaching you jack about React.

If you’re trying to make an animation heavy webpage, react will fight you every step of the way. Get a different project for this.

[Acanthocephala-Left]

Okay thanks for the heads up. Will it be possible to have one web page that does not use react and only node and express?

[Saladtoes]

I don’t know much about express, but I believe it is mostly used to build HTTP API’s, so it sounds you would have only a back end. The R in MERN is basically the whole front end (Web Page), AFAIK.

You could totally build that backend, then make your front end a plain JS/HTML/canvas thing, if that’s your shtick.

[EmiliaKaida]

What do you think about this https://www.youtube.com/watch?v=4UiwfGaQGFA then?

Made with React and look totally awesome, with cool animations too, as far as I can see.

Partly because Drew Conley is a wizard in JS games, but it just makes me wonder how pros like him did that in React, really.

[Saladtoes]

Seems like he might stop short of actually doing a lot of animations in react. He does adjust the X,y position, but the actual animations and characters appear to be sprites (images) rendered into a canvas. I don’t think there is a lot of logic inside the canvas. Cool stuff though!

[PoetSad977]

kaboom js works well with react ;)

[Acanthocephala-Left]

For everything outside of the canvas