Как сделать график холста отзывчивым?

Question

Я сделал этот график, используя холст. Однако этот график не реагирует и когда я пытался сделать его отзывчивым, рисуя в соответствии с новым размером. Остальные строки остались на экране вместе с новыми строками. как я могу изменить размер каждой строки, не рисуя их снова и снова?

---

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

Вы можете просто использовать CSS на элементе холста:

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

Увеличенная нарисованный холст, чтобы избежать плохой пикселизации при растяжении.