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

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

References

<li>Inserisce voci all'interno di una lista
<title>Definisce il titolo della pagina web.
postDefinisce un metodo di invio di dati al server
<body>Tag primario di un documento HTML
<th>Definisce una cella di intestazione di una tabella HTML.
_parentApre collegamenti ipertestuali nell'elemento genitore

Users

Log in to search for users

Explore

Find inspiration

block zoom test

Con nome bandiera(2)

Calcolatrice Pitagora

textarea select and replace

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

<!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 = canvas.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){
  crd.x = event.clientX - canvasArea.offsetLeft;
  crd.y = event.clientY - canvasArea.offsetTop;
}

function Draw(event){
  paint = true;
  Posizione(event);
}

function Stop(){
  paint = false;
}

function Move(event){
  if (!paint) return;
  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();
  document.addEventListener('mousedown', Draw);
  document.addEventListener('mouseup', Stop);
  document.addEventListener('mousemove', Move);
  window.addEventListener('reset', Reset);
});