const canvasContainer = document.getElementById('canvas-container');
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

canvas.width = canvasContainer.offsetWidth;
canvas.height = 100;
canvasContainer.appendChild(canvas);

const ecgData = [
	{ 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 }
];

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();
};

document.getElementById('show').addEventListener('click', () => {
	drawEcg();
});