JSFiddle - React, Tailwind, and code Playground

HTML

<html>
  <head>
    <script src="https://d3js.org/d3.v5.min.js"></script>
  </head>
  <body>
    <canvas class="my-canvas"></canvas>
   
    <script>
      const myCanvas = d3.select(".my-canvas")
      .style('opacity', 0)
      .on('click', function () {
        console.log("click")
        let ctx = this.getContext('2d')
        const pixel = ctx.getImageData(0, 0, 1, 1)
      })
      .call(d3.zoom().on('zoom', () => {
        console.log("zooming")
      }))
      .call(function (s) {
        let ctx = s.node().getContext('2d')
        ctx.clearRect(0, 0, s.node().width, s.node().height)
      })
    </script>
  </body>
</html>