BytePost Brevi guide, dritti al punto!
BytePost
HTML HTML&JS JavaScript

Disegnare in un Canvas HTML con JavaScript

di |Pubblicato

I canvas HTML sono elementi molto particolari ed interessanti, poiché permettono di creare contenuti grafici tramite semplici istruzioni JavaScript.

Tra le svariate applicazioni dei canvas, trovo che tra le più curiose ci sia quella che permette di trasformarli in aree di disegno a mano libera, un po’ come quella del classico Paint di Windows.

Ebbene, creare aree di disegno con un canvas HTML è abbastanza semplice, con poche righe di codice HTML e JavaScript è possibile generare un’area predisposta al disegno libero con il cursore del mouse con annessa un’area di impostazioni pennello, che permetta all’utente di modificare la dimensione, il colore e la forma del pennello.

In questa guida ti mostrerò il codice per creare un canvas predisposto per il disegno con il mouse. Tuttavia, prima di proseguire, consiglio di avere una conoscenza base di HTML e JavaScript per comprendere pienamente il codice mostrato. Puoi approfondire con il nostro corso gratis HTML e quello JavaScript.

Creare e disegnare in un canvas HTML con JavaScript

Disegnare digitalmente con il cursore del mouse è sempre divertente, e lo è ancor di più in un ambiente creato da te stesso, con le tue impostazioni e configurazioni.

I canvas HTML permettono proprio di generare aree di disegno, con il quale un visitatore può disegnare forme e linee semplicemente cliccandoci all’interno con il mouse.

Per creare un’area di disegno personalizzata in un canvas ci basta definire poche righe di codice HTML e JavaScript, con alcune regole di stile CSS per la grafica generale della pagina.

Qui un’anteprima con relativo codice sorgente:

Codice HTML

Il codice HTML della nostra pagina serve a creare due componenti:

  • Il pannello strumenti, dove sono presenti le impostazioni del pennello per la modifica della dimensione e della forma, con la selezione del colore.
  • L’area di disegno, basata sul tag <canvas> HTML.

Entrambi i componenti sono contenuti in un <div> principale.

Questo è il codice:

<div class="cont">

<!-- AREA STRUMENTI -->
      <div id="tools">
        <h3>Impostazioni</h3>

        <label for="spessore">Spessore pennello</label>
        <input id="spessore" type="range" min="1" max="30" value="10" onchange="refreshTool()">
        <br>  
        <br> 

        <label for="colore">Colore
</label>
        <input id="colore" type="color" onchange="refreshTool()">
        <br>  
        <br> 

        <label for="forma">Forma</label>
        <select id="forma" onchange="refreshTool()">
          <option value="round">Rotondo
          </option>
          <option value="square">Quadrato
          </option> 
          <option value="butt">Linea
          </option>
        </select>
        <br>
        <br>

        <button onclick="resize()">
          Cancella tutto
        </button>
      </div>


<!-- AREA DI DISEGNO -->
      <div id="area">
        <canvas id="canvas">
        </canvas>
      </div>
    </div>

<!-- STILE CSS -->
<style>
      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;
      }
</style>

Nel codice ho aggiunto anche un po’ di codice CSS per una corretta visualizzazione dello strumento.

Codice JavaScript

Il codice JavaScript è composto da differenti funzioni, che rilevano quando si inizia a disegnare con il cursore del mouse e quando ci si ferma, oppure la funzione per aggiornare i parametri del pennello.

Il codice:

var pennello, colore, spessore;
let coord = { x:0 , y:0};
let paint = false;
const canvas = document.querySelector('#canvas');
const ctx = canvas.getContext('2d');

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

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

function Posizione(event){
  coord.x = event.clientX - canvas.offsetLeft;
  coord.y = event.clientY - canvas.offsetTop;
}

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

function Stop(){
  paint = false;
}

function Move(event){
  if (!paint) return;
  ctx.beginPath();
  ctx.lineWidth = spessore;
  ctx.lineCap = pennello;
  ctx.strokeStyle = colore;
  ctx.moveTo(coord.x, coord.y);
  Posizione(event);
  ctx.lineTo(coord.x, coord.y);
  ctx.stroke();
}

//Inizializza
window.addEventListener('load', ()=>{
  Reset();
  AggiornaTools();
  document.addEventListener('mousedown', Draw);
  document.addEventListener('mouseup', Stop);
  document.addEventListener('mousemove', Move);
  window.addEventListener('reset', Reset);
});

Codice completo

Qui il codice completo HTML:

<div class="cont">

<!-- AREA STRUMENTI -->
      <div id="tools">
        <h3>Impostazioni</h3>

        <label for="spessore">Spessore pennello</label>
        <input id="spessore" type="range" min="1" max="30" value="10" onchange="refreshTool()">
        <br>  
        <br> 

        <label for="colore">Colore
</label>
        <input id="colore" type="color" onchange="refreshTool()">
        <br>  
        <br> 

        <label for="forma">Forma</label>
        <select id="forma" onchange="refreshTool()">
          <option value="round">Rotondo
          </option>
          <option value="square">Quadrato
          </option> 
          <option value="butt">Linea
          </option>
        </select>
        <br>
        <br>

        <button onclick="resize()">
          Cancella tutto
        </button>
      </div>


<!-- AREA DI DISEGNO -->
      <div id="area">
        <canvas id="canvas">
        </canvas>
      </div>
    </div>

<!-- STILE CSS -->
<style>
      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;
      }
</style>
<script>
var pennello, colore, spessore;
let coord = { x:0 , y:0};
let paint = false;
const canvas = document.querySelector('#canvas');
const ctx = canvas.getContext('2d');

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

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

function Posizione(event){
  coord.x = event.clientX - canvas.offsetLeft;
  coord.y = event.clientY - canvas.offsetTop;
}

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

function Stop(){
  paint = false;
}

function Move(event){
  if (!paint) return;
  ctx.beginPath();
  ctx.lineWidth = spessore;
  ctx.lineCap = pennello;
  ctx.strokeStyle = colore;
  ctx.moveTo(coord.x, coord.y);
  Posizione(event);
  ctx.lineTo(coord.x, coord.y);
  ctx.stroke();
}

//Inizializza
window.addEventListener('load', ()=>{
  Reset();
  AggiornaTools();
  document.addEventListener('mousedown', Draw);
  document.addEventListener('mouseup', Stop);
  document.addEventListener('mousemove', Move);
  window.addEventListener('reset', Reset);
});

</script>

Iscriviti alla nostra Newsletter qui e seguici su Facebook per aggiornamenti!

Articoli recenti:

AUTORE

Simone Bernardo
Appassionato da sempre del mondo informatico, di ogni sua sfaccettatura. Ideatore, creatore e gestore di BytePost fin dalla pubblicazione. Studio come autodidatta e non smetto mai di imparare cose nuove ed interessanti.

Potrebbe anche interessarti

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

CAPTCHA