?<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>
