<canvas id="canvasId" width="600px" height="400px" style="border: 1px solid red;"></canvas>
<script>
let canvasDOM = document.getElementById('canvasId');
let cavs = canvasDOM.getContext("2d")
canvasDOM.onmousedown = function (e) {
cavs.moveTo(e.clientX - canvasDOM.offsetLeft, e.clientY - canvasDOM.offsetTop);
document.onmousemove = function (e) {
cavs.lineTo(e.clientX - canvasDOM.offsetLeft, e.clientY - canvasDOM.offsetTop);
cavs.stroke()
}
}
document.onmouseup = function () {
document.onmousemove = null
document.onmouseup = null
}
</script>
