キャンバスグラフを反応的にするには？

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

あなただけのcanvas要素の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

拡大ストレッチすると悪いピクセレーションを回避するために描かれたキャンバス。