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"
];

useEffect(() => {                             
  var canvas = document.getElementById('canvas');
  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;

score 0 · Accepted Answer · answered Sep 21 '22 at 21:15

0

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'.

answered Sep 21 '22 at 21:15

Alex Gourlay

365
1
12

Hey i changed the code it's still not working – Mallikarjun S Modi Sep 22 '22 at 07:14
Take a look at this sandbox: https://codesandbox.io/s/silly-jasper-td81fh?file=/src/Spo2.js You need to change the style attribute of the canvas to an object, which is the React way of doing things. – Alex Gourlay Sep 22 '22 at 08:15
It's finally working, Thank you so much, really appreciate your time. :) – Mallikarjun S Modi Sep 22 '22 at 08:41
Hey how can I push Live socket data into var EcgData ? I tried the var EcgData = []; var i = EcgData.length; for(i=0; i<1000; i++){ EcgData.push(SpWave); } //SpWave is the live socket data when i Console.log the data is being pushed but the the canvas line is stagnent – Mallikarjun S Modi Sep 23 '22 at 06:27

How do I render canvas in React js?

1 Answers1