I am using react-native canvas to plot sine-wave on mobile, after drawing on couple of instances application gets hang, when i monitor with profiler it shows memory usage exceed.
here is the code .
`import React from 'react';
import Canvas from 'react-native-canvas';
export default function CanvasComponent(): JSX.Element {
const ecgData = ["905,923,950,979,1033,1090,1157,1232,1320,1398,1495,1613,1736,1866,2011,2170,2331,2499,2683,2880,3085,3291,3490,3689,390,4123,4320,4503,4671,4815,4946,5048,5121,5172,5197,5195,5173,5111,5024,4924,4792,4637,4469,4283,4081,3878,3674,3451,3230,3018,2819,2606,2403,2213,2031,1868,1723,1558,1396,1254,1101,921,726,497,251,1"];
let ctx: any, gridCanvasContext: any;
let w: any,
h: any,
speed = 2,
scanBarWidth = 30,
i = 0;
let data: any = ecgData[0].split(','),
color = '#00ff00',
px = 0,
opx = 0,
py: any = h / 2,
opy = py;
const handleCanvas = (canvas: any) => {
ctx = canvas.getContext('2d');
w = canvas.width;
h = canvas.height;
ctx.strokeStyle = color;
ctx.lineWidth = 2; drawWave();
}
const 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++] / 450 + 10);
ctx.lineTo(px, py);
ctx.stroke();
opx = px;
opy = py;
ctx.closePath();
if (opx > w) { px = opx = -speed; }
requestAnimationFrame(drawWave);
}
return (
);
}`
Help me out is there anything needs to be added, i have seen that webview cache false condition is not kept in the react-native canvas
HI Team,
I am using react-native canvas to plot sine-wave on mobile, after drawing on couple of instances application gets hang, when i monitor with profiler it shows memory usage exceed.
here is the code .
`import React from 'react'; import Canvas from 'react-native-canvas'; export default function CanvasComponent(): JSX.Element { const ecgData = ["905,923,950,979,1033,1090,1157,1232,1320,1398,1495,1613,1736,1866,2011,2170,2331,2499,2683,2880,3085,3291,3490,3689,390,4123,4320,4503,4671,4815,4946,5048,5121,5172,5197,5195,5173,5111,5024,4924,4792,4637,4469,4283,4081,3878,3674,3451,3230,3018,2819,2606,2403,2213,2031,1868,1723,1558,1396,1254,1101,921,726,497,251,1"]; let ctx: any, gridCanvasContext: any; let w: any, h: any, speed = 2, scanBarWidth = 30, i = 0; let data: any = ecgData[0].split(','), color = '#00ff00', px = 0, opx = 0, py: any = h / 2, opy = py; const handleCanvas = (canvas: any) => { ctx = canvas.getContext('2d'); w = canvas.width; h = canvas.height; ctx.strokeStyle = color; ctx.lineWidth = 2; drawWave(); } const 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++] / 450 + 10); ctx.lineTo(px, py); ctx.stroke(); opx = px; opy = py; ctx.closePath(); if (opx > w) { px = opx = -speed; } requestAnimationFrame(drawWave);
} return (
);
}`
Help me out is there anything needs to be added, i have seen that webview cache false condition is not kept in the react-native canvas