Generate 10k Canvas Blocks with custom image

by heldersepu

HTML

<div id="app"></div>

React

const { useState, useEffect, useRef } = React;



const Canvas = (props) => {
	const x = 0, y = 0
  const canvasRef = useRef(null)
  const [click, setClick] = useState({ x: -1, y: -1 })
  var cols = 10;
  var rows = 10;
  var size = 20;
  var shapes = []
  

  useEffect(() => {
    const canvas = canvasRef.current
    canvas.width = canvas.height = 500;
    const context = canvas.getContext('2d')
    draw(context)
  }, [draw,x,y,getPosition])

    return (
							<canvas
								ref={canvasRef}
								{...props}
								onClick={getPosition}
							></canvas>
    )
}

const root = ReactDOM.createRoot(document.querySelector("#app"))
root.render(
  <React.StrictMode>
    <Canvas />
  </React.StrictMode>
);