SOURCE

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


ctx = canvas.getContext('2d');

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 = '8.0'
    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
}
download = function() {
        var can = document.getElementById("canvas"); // 获取canvas元素
        var cxt = can.getContext("2d"); // 创建context对象
        // 以上获得一个canvas图形

        // 接下来将canvas转换成base64的url
        var url = can.toDataURL("image/png"); // 该方法获得的base64和上面提到echarts的API得到的一样
        // 注意该方法属于canvas元素，而不是创建的context对象
        var arr = url.split(","),
            mime = arr[0].match(/:(.*?);/)[1], // 此处得到的为文件类型
            bstr = atob(arr[1]), // 此处将base64解码
            n = bstr.length,
            u8arr = new Uint8Array(n);
        while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
        }

        // 通过以下方式将以上变量生成文件对象，三个参数分别为文件内容、文件名、文件类型
        var file = new File([u8arr], "filename", {
            type: mime
        });
        var aDom = document.createElement("a"); // 创建一个 a 标签
        aDom.download = file.name; // 设置文件名
        let href = URL.createObjectURL(file); // 将file对象转成 UTF-16 字符串
        aDom.href = href; // 放入href
        document.body.appendChild(aDom); // 将a标签插入 body
        aDom.click(); // 触发 a 标签的点击
        document.body.removeChild(aDom); // 移除刚才插入的 a 标签
        URL.revokeObjectURL(href); // 释放刚才生成的 UTF-16 字符串
    }

<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>
    <hr>
    <img src="" alt="">
</div>

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