draw on canvas by @Codewith.it - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

Referenze

actionDetermina la pagina di destinazione a cui verranno inviati i dati di un form HTML
getDefinisce un metodo di invio di dati al server
<q>Indica una parte di testo come citazione breve
crossoriginGestisce richieste tra documenti provenienti da origini differenti.
animation-delayDetermina il tempo prima dell'avvio di una animazione in secondi (es. 1s) o millisecondi (ms)
<i>Formatta il testo in corsivo/italico non enfatizzato

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

DEMO: Hi-Lo Game

calcola peso in byte

Bootstrap List Grid

5/10/24 es. 10 - cifratura

ZacTour - Scopri la Puglia Autenti

Mundane Monday\\

Banner cercatutto

JS Elementi del linguaggio es3

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

<!DOCTYPE html>
<html >
  <body>
    <div class="cont">
      <div id="tools">
        <h3>
          Impostazioni
        </h3>
        <label for="spessore">Spessore pennello
        </label>
        <input id="spessore" type="range" min="1" max="30" value="10" onchange="AggiornaTools()">
        <br>  
        <br> 
        <label for="colore">Colore
        </label>
        <input id="colore" type="color" onchange="AggiornaTools()">
        <br>  
        <br> 
        <label for="forma">Forma
        </label>
        <select id="forma" onchange="AggiornaTools()">
          <option value="round">Rotondo
          </option>
          <option value="square">Quadrato
          </option> 
          <option value="butt">Linea
          </option>
        </select>
        <br>
        <br>
        <button onclick="Reset()">
          Cancella tutto
        </button>
      </div>
      <div id="area">
        <canvas id="canvas">
        </canvas>
      </div>
    </div>
  </body>
</html>

body{
  font-family:"arial"
}
.cont{
  display:flex;
  margin:auto;
}
.cont > div{
  flex:1 ;
}
canvas{
  background: white;
  border:solid 1px grey;
  cursor:crosshair;
}
#tools{
  background:rgba(228,228,228,0.7);
  padding:20px 5px;
  text-align:center;
  max-width:300px;
}

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 Posizione(event) {
  // Gestisci sia eventi touch che mouse
  if (event.touches) {
    crd.x = event.touches[0].clientX - canvasArea.offsetLeft;
    crd.y = event.touches[0].clientY - canvasArea.offsetTop;
  } else {
    crd.x = event.clientX - canvasArea.offsetLeft;
    crd.y = event.clientY - canvasArea.offsetTop;
  }
}

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);
});