How do I render canvas in React js?

Question

I could render it in HTML but React has a different syntax which i cannot find, can you please help. Unable to render it in react - displays blank page.

Working HTML code - https://jsfiddle.net/me6s8q2g/176/

The data is live spo2 wave amplitude number from the sensor. Please refer the HTML jsfiddle code to understand the code and animation.

This is my code:

import React from 'react';
import {useEffect, useState} from 'react';


 function Spo2() {
     var EcgData=[ "3700,4800,5900,6700,7400,7700,7800,7700,7600,7400,7200,7100,7000,7000,7000,7000,7100,7100,7100,7000,6800,6600,6300,6000,5800,5500,5300,5100,4900,4800,4600,4500,4300,4100,3900,3700,3500,3300,3100,2900,2800,2600,2500,2300,2300,2500,3000,3600,4600,5600,6700,7600,8200,8600,8800,8800,8600,8400,8200,7900,7700,7500,7400,7400,7400,7500,7500,7400,7300,7100,6800,6500,6200,5800,5500,5200,4900,4700,4500,4400,4200,4100,3900,3800,3600,3400,3200,3200,3300,3800,4500,5500,6700,7800,8700,9400,9500,9500,9400,9200,8900,8600,8400,8200,8000,7900,7900,7900,7900,7800,7700,7500,7200,6800,6400,6100,5700,5400,5100,4800,4600,4500,4300,4100,3900,3800,3600,3300,3100,2900,2600,2300,2100,1900,1900,2200,2800,3800,5000,6300,7600,8600,9300,9500,9500,9400,9100,8900,8600,8300,8100,8000,7900,7900,7900,7900,7800,7700,7500,7200,6800,6400,6100,5700,5400,5100,4900,4600,4500,4300,4100,3900,3700,3500,3200,3000,2700,2400,2100,1900,1700,1400,1200,1000,900,700,800,1100,1700,2600,3800,5100,6300,7400,8100,8400,8500,8400,8200,7900,7600,7400,7200,7000,7000,7000,7000,7000,6800,6300,5900,4800,4400,4200,3900,3700,3500,3300,3200,3000,2800,2500,2300,2000,1800,1500,1200,1000,700,500,500,500,500,500,500,500,500,500,500,500,500,500,500,500,500,500,800,1400,2200,3300,4400,5500,6400,7100,7500,7600,7600,7500,7400,7300,7200,7100,7000,7000,7100,7100,7100,7100,7100,6900,6800,6500,6300,6000,5700,5500,5300,5100,4900,4800,4600,4500,4400,4200,4000,3800,3600,3400,3200,3000,2800,2600,2400,2300,2100,1900,1800,1600,1500,1400,1200,1100,1000,900,800,700,800,1200,1800,2800,3900,5100,6300,7200,7800,8100,8200,8100,7900,7700,7500,7300,7200,7200,7300,7400,7500,7500,7600,7500,7400,7200,6900,6600,6200,5900,5600,5400,5200,5100,4900,4800,4700,4600,4500,4300,4100,3800,3600,3300,3100"
];

React.useEffect(() => {                             
  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");
            var w = canvas.width,
            h = canvas.height,
            speed = 3,
            scanBarWidth = 20,
            i=0,
            data = EcgData[0].split(','),
            color='#00ff00';
            var px = 0;
            var opx = 0;
            var py = h/5;
            var opy = py;
            ctx.strokeStyle = color;
            ctx.lineWidth = 2;
            ctx.setTransform(1,0,0,-3,0,h);

         
            drawWave();

            function drawWave() {
               px += speed;
                    ctx.clearRect( px,0, scanBarWidth, h);
                    ctx.beginPath();
                    ctx.moveTo( opx,  opy);
                    ctx.lineJoin= 'round';
                    py=(data[++i>=data.length? i=0 : i++]/300+10);
                    ctx.lineTo(px, py);
                    ctx.stroke();
                     opx = px;
                    opy = py;
                    if (opx > w) {px = opx = -speed;}


                     requestAnimationFrame(drawWave);
            }
});



  return(
 
   <div><h1>hello world</h1>
   
   <canvas id="canvas" width="500" height="160" style="background-color: black;">your browser does not support htm </canvas>

   
   </div>
  );

  };
export default Spo2;

Answer 1

You are not using the correct id in your document.getElementById() call. It should be document.getElementById('canvas'), as you have given the canvas element an id of 'canvas'.