Update script.js

script.js

@@ -1,59 +1,37 @@
-// Get the canvas element
-const canvas = document.getElementById('ecg-canvas');
+const canvasContainer = document.getElementById('canvas-container');
+const canvas = document.createElement('canvas');
 const ctx = canvas.getContext('2d');
 
-// Set the canvas dimensions
-canvas.width = 400;
+canvas.width = canvasContainer.offsetWidth;
 canvas.height = 100;
+canvasContainer.appendChild(canvas);
 
-// Define the ECG data
 const ecgData = [
-    { time: 0, value: 0 },
-    { time: 100, value: 10 },
-    { time: 200, value: 20 },
-    { time: 300, value: 30 },
-    { time: 400, value: 40 },
-    { time: 500, value: 50 },
-    { time: 600, value: 60 },
-    { time: 700, value: 70 },
-    { time: 800, value: 80 },
-    { time: 900, value: 90 },
-    { time: 1000, value: 100 }
+	{ time: 0, value: 0 },
+	{ time: 10, value: 1 },
+	{ time: 20, value: 0.5 },
+	{ time: 30, value: -1 },
+	{ time: 40, value: -0.5 },
+	{ time: 50, value: 0 },
+	{ time: 60, value: 0.5 },
+	{ time: 70, value: 1 },
+	{ time: 80, value: 0.5 },
+	{ time: 90, value: -0.5 },
+	{ time: 100, value: 0 }
 ];
 
-// Define the beat data
-const beatData = [
-    { time: 0, value: 0 },
-    { time: 333, value: 33 },
-    { time: 66, value: 66 },
-    { time: 99, value: 99 }
-];
-
-// Draw the ECG graph
-function drawECG() {
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
-    ctx.beginPath();
-    ctx.moveTo(0, canvas.height / 2);
-    for (let i = 0; i < ecgData.length; i++) {
-        const point = ecgData[i];
-        ctx.lineTo(point.time, point.value);
-    }
-    ctx.lineTo(canvas.width, canvas.height / 2);
-    ctx.stroke();
-}
-
-// Draw the beat markers
-function drawBeats() {
-    ctx.beginPath();
-    for (let i = 0; i < beatData.length; i++) {
-        const beat = beatData[i];
-        ctx.fillStyle = 'red';
-        ctx.fillRect(beat.time, canvas.height / 2, 5, 5);
-    }
-}
+const drawEcg = () => {
+	ctx.clearRect(0, 0, canvas.width, canvas.height);
+	ctx.lineWidth = 2;
+	ctx.strokeStyle = 'rgba(0, 0, 255, 1)';
+	ctx.beginPath();
+	ctx.moveTo(0, canvas.height / 2);
+	ecgData.forEach((data, i) => {
+		ctx.lineTo(i, (data.value + 1) * canvas.height / 4);
+	});
+	ctx.stroke();
+};
 
-// Show the ECG graph and beat markers
-document.getElementById('show-button').addEventListener('click', function() {
-    drawECG();
-    drawBeats();
+document.getElementById('show').addEventListener('click', () => {
+	drawEcg();
 });