Canvas: un esempio pratico

Ora che abbiamo almeno un'idea delle potenzialità dello strumento che stiamo analizzando, accingiamoci ad una sperimentazione pratica attraverso il progetto guida. Quello che faremo sarà dare la possibilità agli utenti della fiveboard di disegnare utilizzando un canvas, lo stesso verrà poi memorizzato insieme al testo sul già noto localStorage. Introduciamo anche in questo contesto il concetto di EventoCustom, la possibilità cioè di lanciare arbitrariamente eventi in tutto e per tutto simili a quelli utilizzati dal DOM. Questa feature ci sarà utilissima per mantenere un codice elegante e contemporaneamente sincronizzare salvataggio e recupero di testo e canvas dal localStorage; aggiungiamo ad application.js il seguente metodo:

lanciaEvento = function(nome_evento){
  var evento = document.createEvent("CustomEvent");
  evento.initCustomEvent(nome_evento, true, true, titolo_fiveboard);
  document.dispatchEvent(evento);
}

Eliminiamo successivamente dallo stesso file le funzioni salvaIlDato e recuperaIlDato sostituendole con le seguenti:

salvaAppunti = function(evento){
  localStorage.setItem("fb_" + evento.detail,
    document.forms['form_da_ricordare'].elements['testo_da_ricordare'].value
  );
  alert("Appunti salvati");
}
recuperaAppunti = function(evento){
  document.forms['form_da_ricordare'].elements['testo_da_ricordare'].value =
localStorage.getItem("fb_" + evento.detail);
  alert("Appunti recuperati");
}
document.addEventListener('salvadato', salvaAppunti);
document.addEventListener('recuperadato', recuperaAppunti);

Bene, ora abbiamo creato le due funzioni e le abbiamo registrate rispettivamente agli eventi custom ‘salvadato’ e ‘recuperadato’; ora non ci resta che scatenare questi eventi al click dei bottoni del file index.html, modifichiamo quindi come segue:

...
  <menu type="toolbar">
    <button type="button" onclick="lanciaEvento('salvadato');">
      Memorizza quanto scritto
    </button>
    <button type="button" onclick="lanciaEvento('recuperadato');">
      Recupera l'ultimo testo memorizzato
    </button>
  </menu>
...

Ottimo! Ora possiamo aggiungere un canvas poco prima della fine della pagina e procedere con il nostro esperimento:

...
  <canvas id="drawboard"></canvas>
  </form>
...

In un file chiamato canvas.js, sempre nella cartella js, scriviamo:

var ctx	= null;
var started	= false;
iniziaDisegno = function(evento){
  ctx.beginPath();
  ctx.moveTo(evento.offsetX,evento.offsetY);
  started = true;
}
disegna = function(evento){
  if(started){
    ctx.lineTo(evento.offsetX,evento.offsetY);
    ctx.stroke();
  }
}
fermaDisegno = function(evento){
  ctx.closePath();
  started = false;
}
salvaCanvas = function(evento){
  localStorage.setItem("canvas_fb_" + evento.detail, ctx.canvas.toDataURL('image/png'));
  alert("Canvas salvato");
}
recuperaCanvas = function(evento){
  var immagine_salvata = localStorage.getItem("canvas_fb_" + evento.detail);
  if(immagine_salvata == null) return;
  var img = new Image();
  img.src = immagine_salvata;
  ctx.canvas.width = ctx.canvas.width;
  ctx.drawImage(img, 0, 0);
  alert("Canvas recuperato");
}
attivaIlCanvas = function(evento){
  ctx = document.querySelector('canvas').getContext('2d');
  ctx.canvas.addEventListener('mousedown' , iniziaDisegno,false );
  ctx.canvas.addEventListener('mousemove' , disegna	,false );
  ctx.canvas.addEventListener('mouseup' ,   fermaDisegno ,false );
  ctx.canvas.addEventListener('mouseleave', fermaDisegno ,false );
  document.addEventListener('salvadato', salvaCanvas	);
  document.addEventListener('recuperadato', recuperaCanvas	);
} 
window.addEventListener('load' ,attivaIlCanvas,false);

Approfondiamo un po’ quanto scritto: la funzione appena qui sopra ‘attivaIlCanvas’ viene eseguita al load della pagina e si preoccupa di registrare tutti gli handler necessari alla gestione delle funzioni di disegno e di registrazione. In particolare iniziaDisegno, disegna e fermaDisegno utilizzano alcune funzioni che abbiamo esplorato nelle specifiche per disegnare delle spezzate che seguono la posizione del mouse. salvaCanvas e recuperaCanvas sono invece funzioni che vengono attivate dai nostri eventi custom; in questo caso la parte interessante è da ricercarsi nell’utilizzo del metodo toDataUrl che trasforma il contenuto del canvas in una stringa, rendendolo quindi memorizzabile all’interno dell’hash localStorage. In recuperaCanvas poi, la stessa stringa contenente l’immagine viene utilizzata come attributo src di un oggetto Image e successivamente ridipinta sul canvas.

Ricordiamoci di richiedere il file canvas.js all’interno della pagina index.html e proviamo la nostra creazione (figura 1):

Conclusioni

Il canvas è uno strumento incredibilmente vasto, potente ed articolato. La panoramica offerta da questa lezione introduce in modo abbastanza esauriente l’insieme delle tematiche anche se per non dilungarsi troppo non ne approfondisce nessuna. Nonostante questa evidente ricchezza il canvas resta comunque uno strumento di basso livello e permane in uno stato di difficile utilizzo a meno che non sia supportato dai dovuti framework, come ad esempio processing.js, canto.js e l’ottimo Easel.js. In questa lezione si è inoltre volutamente ignorato il tema dell’interazione tra canvas e video, che verrà affrontato nel dovuto dettaglio nella prossima lezione di questa guida.