static/js/tools.js

class DrawingTools {
  constructor(canvas, ctx) {
    this.canvas = canvas;
    this.ctx = ctx;
    this.color = '#000000';
    this.brushSize = 2;
    this.isEraser = false;
    this.setupTools();
  }

  setupTools() {
    const colorPicker = document.getElementById('colorPicker');
    const brushSize = document.getElementById('brushSize');
    const brushSizeLabel = document.getElementById('brushSizeLabel');
    const eraserBtn = document.getElementById('eraserBtn');

    colorPicker.addEventListener('input', (e) => {
      this.color = e.target.value;
      this.isEraser = false;
      eraserBtn.classList.remove('active');
    });

    brushSize.addEventListener('input', (e) => {
      this.brushSize = e.target.value;
      brushSizeLabel.textContent = `${this.brushSize}px`;
    });

    eraserBtn.addEventListener('click', () => {
      this.isEraser = !this.isEraser;
      eraserBtn.classList.toggle('active');
    });
  }

  applyToolSettings() {
    if (this.isEraser) {
      this.ctx.globalCompositeOperation = 'destination-out';
      this.ctx.strokeStyle = 'rgba(0,0,0,1)';
    } else {
      this.ctx.globalCompositeOperation = 'source-over';
      this.ctx.strokeStyle = this.color;
    }
    this.ctx.lineWidth = this.brushSize;
  }
}