Source Code:
(back to article)
Submit
Result:
Report an issue
<div> <p>Start drawing in the box below and see the result!</p> </div> <div> <canvas id="drawingCanvas" width="400" height="300" style="border:1px solid #000;"></canvas> </div> <script> const canvas = document.getElementById('drawingCanvas'); const ctx = canvas.getContext('2d'); let drawing = false; canvas.addEventListener('mousedown', () => drawing = true); canvas.addEventListener('mouseup', () => drawing = false); canvas.addEventListener('mouseout', () => drawing = false); canvas.addEventListener('mousemove', function(event) { if (drawing) { ctx.lineTo(event.clientX - canvas.offsetLeft, event.clientY - canvas.offsetTop); ctx.stroke(); } }); </script>