Graphic Drawing Tool JavaScript, Canvas

👤 Sharing: AI 
```javascript
<!DOCTYPE html>
<html>
<head>
<title>Simple Drawing Tool</title>
<style>
  #canvas {
    border: 1px solid black;
    cursor: crosshair;
  }
  #toolbar {
    margin-bottom: 10px;
  }
</style>
</head>
<body>

<div id="toolbar">
  <label for="colorPicker">Color:</label>
  <input type="color" id="colorPicker" value="#000000">

  <label for="lineWidth">Line Width:</label>
  <input type="number" id="lineWidth" value="5" min="1" max="20">

  <button id="clearButton">Clear</button>
  <button id="downloadButton">Download</button>

</div>

<canvas id="canvas" width="800" height="600"></canvas>

<script>
  const canvas = document.getElementById('canvas');
  const ctx = canvas.getContext('2d');
  const colorPicker = document.getElementById('colorPicker');
  const lineWidthInput = document.getElementById('lineWidth');
  const clearButton = document.getElementById('clearButton');
  const downloadButton = document.getElementById('downloadButton');

  let isDrawing = false;
  let lastX = 0;
  let lastY = 0;
  let currentColor = colorPicker.value;
  let currentLineWidth = lineWidthInput.value;


  function startDrawing(e) {
    isDrawing = true;
    lastX = e.offsetX;
    lastY = e.offsetY;

    ctx.beginPath(); // Start a new path to prevent connecting to previous lines
    ctx.moveTo(lastX, lastY);
  }

  function draw(e) {
    if (!isDrawing) return;  // Stop function from running when they are not moused down

    ctx.strokeStyle = currentColor;
    ctx.lineWidth = currentLineWidth;
    ctx.lineCap = 'round'; // Makes the line ends rounded
    ctx.lineJoin = 'round'; // Makes line joins rounded

    ctx.lineTo(e.offsetX, e.offsetY);
    ctx.stroke();

    lastX = e.offsetX;
    lastY = e.offsetY;
  }

  function stopDrawing() {
    isDrawing = false;
  }

  function clearCanvas() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
  }

  function downloadCanvas() {
    const image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
    const link = document.createElement('a');
    link.download = "my_drawing.png";
    link.href = image;
    link.click();
  }



  canvas.addEventListener('mousedown', startDrawing);
  canvas.addEventListener('mousemove', draw);
  canvas.addEventListener('mouseup', stopDrawing);
  canvas.addEventListener('mouseout', stopDrawing);

  colorPicker.addEventListener('input', () => {
    currentColor = colorPicker.value;
  });

  lineWidthInput.addEventListener('input', () => {
    currentLineWidth = lineWidthInput.value;
  });

  clearButton.addEventListener('click', clearCanvas);
  downloadButton.addEventListener('click', downloadCanvas);

</script>

</body>
</html>
```
👁️ Viewed: 9

Comments