Is there a way to use Canvas to draw something on the click of a button with react.js?

Question

I want to use my <button> component to call a specific function to draw on my Canvas using the HTML5 Canvas.

Here's how the files are structured and how I have passed on the props ->

I placed the main function in App.js, passed it through props to my middle most file of MainPage.jsx and then passed the drawRectangle() method via props to the lowermost file of canvas.jsx

In the lowermost file of Canvas.jsx -

useEffect(() => {
const canvas = canvasRef.current;
canvas.width = "500";
canvas.height = "850";
let frameCount = 0;
let animationFrameId;
const c = canvas.getContext("2d");
//Function I want to call ->
drawRectangle(c, 'blue')

The drawRectangle method is placed in the App.js file (the uppermost file) and the button is in the middle file of MainPage.jsx.

I passed it like this - In App.js

handleRectangle=(c, color)=>
c.fillRect(0,0,100,100)
<MainPage onRectangle={handleRectangle} />

So I want to use a button in my MainPage.jsx file to call this function so that it draws a rectangle onto the canvas. I don't know how to go about this. Since the only way for the drawRectangle() function to work is when it's put in the useEffect() in canvas.jsx.

I am sorry if this is a bit confusing, I am a bit of a beginner at this.

Answer 1

Yes you can by using refs

you just put a ref on your canvas html element and use it in your click function with :

yourref.current.getContext("2d");

here is an example :

https://codesandbox.io/s/flamboyant-tdd-tne28?fontsize=14&hidenavigation=1&theme=dark

Code from the above example pasted here :

import React ,{useRef} from "react";

const DrawOnCanvas = ()=>{
  const myref = useRef(null);

  const _handleClick=()=>{
    let ctx = myref.current.getContext("2d");
    ctx.fillStyle="blue";
    ctx.fillRect(100,100,32,32);
    
  }
  return <canvas width={500} height={350} onClick={_handleClick} ref={myref}></canvas>
}

export default function App() {
  return (
    <div className="App">
      <DrawOnCanvas />
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

if you want to call the draw fucntion in another component you can pass it as props

import React ,{useRef} from "react";

const DrawOnCanvas = (props)=>{

  return <canvas width={500} height={350} onClick={props.clickHappened} ref={props.propRef}></canvas>
}

export default function App() {
  const myref = useRef(null);
  const _handleClick=()=>{
    let ctx = myref.current.getContext("2d");
    ctx.fillStyle="blue";
    ctx.fillRect(100,100,32,32);
  }

  return (
    <div className="App">
      <DrawOnCanvas clickHappened={_handleClick} propRef={myref}/>
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

or if it's really global you could use localStorage to store your ref

you could put a check in _handleClick, just to check if the ref is not null and that should do it, there should'nt be a need to use useEffect.