How to make canvas graph responsive?

Question

I made this graph using canvas. However this graph is not responsive and when I tried to make it responsive by drawing according to the new size The old lines remained on the screen along with the new lines. how can I resize each line without drawing them again and again?

---

1.  function drawShape(a, b, c, d, e, f, g, h, i, j, k, l) { var canvas = document.getElementById('linegraph1'); var value = new Array(a, b, c, d, e, f, g, h, i, j, k, l); var ctx = canvas.getContext('2d'); for (i = 1; i < 13; i++) { { ctx.beginPath(); ctx.lineWidth = 9; ctx.lineCap = 'round'; ctx.strokeStyle = '#FFFFFF'; ctx.moveTo(7 + i * 30, 50); ctx.lineTo(7 + i * 30, 150); ctx.stroke(); } { ctx.beginPath(); ctx.lineWidth = 9; ctx.lineCap = 'round'; ctx.strokeStyle = '#EFF2FB'; ctx.moveTo(7 + i * 30, 50); ctx.lineTo(7 + i * 30, 150); ctx.stroke(); } ctx.lineWidth = 9; ctx.beginPath(); ctx.moveTo(7 + i * 30, 150); if (value[i - 1] > 100) { var buffer = 50; } else { var buffer = 150 - value[i - 1]; } ctx.lineTo(7 + i * 30, buffer); if (value[i - 1] > 80) { ctx.strokeStyle = '#B60114'; } else { ctx.strokeStyle = '#0093CF'; } ctx.lineCap = 'round'; ctx.lineCap = 'round'; ctx.font = "15px Arial"; ctx.fillText(value[i - 1], 1 + i * 30, 180); ctx.stroke(); } ctx.beginPath(); ctx.font = "15px Arial"; ctx.fillText("0", 400, 150); ctx.fillText("25", 400, 105); ctx.fillText("50", 400, 60); ctx.fillText("mb", 400, 180); }

    <div> <canvas id="linegraph1" width="450" height="200" style="border:1px solid grey; border-radius: 10px;"> </div> <button onclick="drawShape(10, 20, 80, 45, 55, 88, 74, 41, 45, 12, 21, 12)">Draw Graph</button>

---

Answer 1

You could just use css on the canvas element:

 function drawShape(a, b, c, d, e, f, g, h, i, j, k, l) { var canvas = document.getElementById('linegraph1'); var value = new Array(a, b, c, d, e, f, g, h, i, j, k, l); var ctx = canvas.getContext('2d'); //Wipe canvas between draws ctx.clearRect(0, 0, canvas.width, canvas.height); for (i = 1; i < 13; i++) { { ctx.beginPath(); ctx.lineWidth = 90; ctx.lineCap = 'round'; ctx.strokeStyle = '#FFFFFF'; ctx.moveTo(7 + i * 300, 500); ctx.lineTo(7 + i * 300, 1500); ctx.stroke(); } { ctx.beginPath(); ctx.lineWidth = 90; ctx.lineCap = 'round'; ctx.strokeStyle = '#EFF2FB'; ctx.moveTo(7 + i * 300, 500); ctx.lineTo(7 + i * 300, 1500); ctx.stroke(); } ctx.lineWidth = 90; ctx.beginPath(); ctx.moveTo(7 + i * 300, 1500); if (value[i - 1] > 100) { var buffer = 50; } else { var buffer = 150 - value[i - 1]; } ctx.lineTo(7 + i * 300, buffer); if (value[i - 1] > 80) { ctx.strokeStyle = '#B60114'; } else { ctx.strokeStyle = '#0093CF'; } ctx.lineCap = 'round'; ctx.lineCap = 'round'; ctx.font = "150px Arial"; ctx.fillText(value[i - 1], 1 + i * 300, 1800); ctx.stroke(); } ctx.beginPath(); ctx.font = "150px Arial"; ctx.fillText("0", 4000, 1500); ctx.fillText("25", 4000, 1050); ctx.fillText("50", 4000, 600); ctx.fillText("mb", 4000, 1800); }

 #linegraph1 { border: 1px solid grey; border-radius: 10px; /* Fit window */ width: 100%; }

 <div> <canvas id="linegraph1" width="4500" height="2000"></canvas> </div> <button onclick="drawShape(10, 20, 80, 45, 55, 88, 74, 41, 45, 12, 21, 12)">Draw Graph</button>

EDIT

Enlarged the drawn canvas to avoid bad pixelation when stretching.