Codewith.it

var pennello;
var colore;
var spessore;
var crd = { x: 0, y: 0 };
var paint = false;
var canvasArea = document.querySelector('#canvas');
var ctxx = canvasArea.getContext('2d');

function Reset() {
  ctxx.canvas.width = 500;
  ctxx.canvas.height = 500;
}

function AggiornaTools() {
  pennello = document.getElementById("forma").value;
  colore = document.getElementById("colore").value;
  spessore = document.getElementById("spessore").value;
}

function Draw(event) {
  event.preventDefault(); // Previene lo scrolling durante il disegno
  paint = true;
  Posizione(event);
}

function Stop(event) {
  event.preventDefault(); // Previene lo scrolling
  paint = false;
}

function Move(event) {
  if (!paint) return;
  event.preventDefault(); // Previene lo scrolling durante il movimento
  ctxx.beginPath();
  ctxx.lineWidth = spessore;
  ctxx.lineCap = pennello;
  ctxx.strokeStyle = colore;
  ctxx.moveTo(crd.x, crd.y);
  Posizione(event);
  ctxx.lineTo(crd.x, crd.y);
  ctxx.stroke();
}

// Inizializza
window.addEventListener('load', () => {
  Reset();
  AggiornaTools();

// Eventi mouse
  canvasArea.addEventListener('mousedown', Draw);
  canvasArea.addEventListener('mouseup', Stop);
  canvasArea.addEventListener('mousemove', Move);

// Eventi touch
  canvasArea.addEventListener('touchstart', (event) => {
    event.preventDefault(); // Previene lo scrolling
    Draw(event);
  }, { passive: false });

canvasArea.addEventListener('touchend', (event) => {
    event.preventDefault(); // Previene lo scrolling
    Stop(event);
  }, { passive: false });

canvasArea.addEventListener('touchmove', (event) => {
    event.preventDefault(); // Previene lo scrolling
    Move(event);
  }, { passive: false });

// Evento reset
  window.addEventListener('reset', Reset);
});