SOURCE

var canvas=document.querySelector('#canvas');
var buttons=document.querySelectorAll('button');
var inputs=document.querySelector('input')

ctx = canvas.getContext('2d');
var tValue;
setInterval(function(event){
    if(tValue !=document.getElementById("txt").value){

        tValue =document.getElementById("txt").value;
    }
},100);
beginDraw = function(){
    if(buttons[0].style.backgroundColor === 'red'){
        buttons[0].style.backgroundColor = '';
        canvas.removeEventListener('mousedown',star);
    }else{
        buttons[0].style.backgroundColor = 'red';
        canvas.addEventListener('mousedown',star);
    }
}
bianhong=function(){
    if(buttons[1].style.backgroundColor==='red'){
        buttons[1].style.backgroundColor = '';
        ctx.strokeStyle='#000000'
    }else{
        buttons[1].style.backgroundColor = 'red';
        ctx.strokeStyle='red'
    }
}

canvas.onmouseup = function(e){
    canvas.removeEventListener('mouseleave',leave);
    canvas.removeEventListener('mousemove',draw);
}

function star(e){
    ctx.beginPath()
    ctx.lineWidth = tValue
    ctx.lineJoin= 'round'
    ctx.lineCap= 'round'
    const {
        offsetX:starX,
        offsetY:starY,
    } =e
    ctx.moveTo(starX,starY);
    canvas.addEventListener('mousemove',draw);
    canvas.addEventListener('mouseleave',leave);
}

function leave(){
    canvas.removeEventListener('mouseleave',leave);
    canvas.removeEventListener('mousemove',draw);
}

function draw(e){
     const {
        offsetX:curX,
        offsetY:curY,
    } =e
    ctx.lineTo(curX,curY)
    ctx.stroke()
}

submitCanvas = function(){
    var img =document.querySelector('img');
    img.src =canvas.toDataURL('image/png');
    img=null
}

<div class="draw-boar" style="border:2px solid #ccc">
    <canvas id="canvas" width="300" height="300"></canvas>
    <hr>
    <button onclick="beginDraw()">画笔</button>
    <button onclick="bianhong()">红色</button>
    <button onclick="{ctx.clearRect(0,0,300,300)}">清空</button>
    <button onclick="submitCanvas()">提交</button>
    <input type="number" id="txt" min="1" value="1">
    <hr>
    <img src="" alt="">
</div>

.draw-boar{
    width: 300px;
    margin: 30px auto;
}