JSFiddle - React, Tailwind, and code Playground

by heldersepu

HTML

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

React

const { useRef, useEffect } = React;

const Canvas = (props) => {
  const canvasReference = useRef(null);

  useEffect(() => {
    const canvas = canvasReference.current;
    const context = canvas.getContext("2d");
    canvas.width = canvas.height = 300;

    const mapImage = new Image();
    mapImage.src = "http://i.stack.imgur.com/UFBxY.png";
    mapImage.onload = () => {
      context.drawImage(mapImage, 0, 0);
    };

  }, []);

  return ( <canvas ref={canvasReference} /> )
};

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