这是我第一次使用stackoverflow寻求帮助，所以如果有什么我做错了请告诉我。我不是母语为英语的人，所以希望你能理解我的问题。
我打算创建一个可以绘制线条的网页。没有什么大问题。但是，我意识到每次使用stroke（）绘制新线条时，前面的线条会变粗。这个问题可以解决吗？
<html>
<body>
<div id="coord"></div>
<canvas id="Maintheme" height="800" width="1000"></canvas>
</body>
<script>
var canvas=document.getElementById("Maintheme");
var context=canvas.getContext('2d');
var coordinates;
var Xcoor;
var Ycoor;
var lineboolean=false;
canvas.width=window.innerWidth;
canvas.height=window.innerHeight;
canvas.addEventListener('mousemove',function(evt){
coordinates=evt.clientX+" "+evt.clientY;
Xcoor=evt.clientX;
Ycoor=evt.clientY;
document.getElementById("coord").innerHTML=coordinates;})
canvas.addEventListener('click',function(){
if (lineboolean==false){
context.moveTo(Xcoor,Ycoor);
lineboolean=true;
}
else{
context.lineTo(Xcoor,Ycoor);
context.stroke();
lineboolean=false;
}
})
</script>
</html>