Javascript Canvas/JS:can'；在不改变前一行的情况下，不要改变行

我正试图通过一个简单的点击功能来改变画布上的徒手画的线条。但当我在这个div中单击时，前面的图形也会获得新的线宽，并且不会保持其原始状态。我能解决这个问题吗

JavaScript

var el = document.getElementById('canvas');
var ctx = el.getContext('2d');
var isDrawing;
var redStroke= ctx.strokeStyle = "#FF0000";

el.onmousedown = function(e) {
  isDrawing = true;
  ctx.moveTo(e.offsetX, e.offsetY);
    //ctx.lineWidth=1;->default
};

el.onmousemove = function(e) {
  if (isDrawing) {
    ctx.lineTo(e.offsetX, e.offsetY);
      ctx.stroke();
  }


};
el.onmouseup = function() {
  isDrawing = false;
};

$('#medium').click(function(){
    var mediumStroke=ctx.lineWidth=5;
   mediumStroke; 
});

$('#large').click(function(){
    var largeStroke=ctx.lineWidth=20;
   largeStroke; 
});

HTML:

中等冲程
厚冲程

在绘制直线之前，您需要使用方法

var el=document.getElementById（'canvas'）；
var ctx=el.getContext（'2d'）；
var提取；
var redStroke=ctx.strokeStyle=“#FF0000”；
el.onmousedown=函数（e）{
isDrawing=true；
ctx.beginPath（）；//执行此操作时，您将在每个mousemove上绘制以前的路径，这将创建工件。清除画布，存储以前的坐标，并在每个mousemove上创建新路径。
<div class="container">
            <canvas id="canvas" width="800" height="500"></canvas>

            <div class= "stroke">
                <p id="medium">Medium Stroke</p>
                <p id="large">Thick Stroke</p>
            </div>

        </div>