Primo approccio con i canvas

Quanti anni è che esiste HTML5? 2 anni?

Io che ho cominciato a lavorare giusto 2 anni fa non sono mai riuscito a farne un uso intelligente a lavoro...

Ed è per questo motivo che ho cominciato a scoprirlo... in un modo non troppo intelligente :)

Tra i numerosi tag che l'HTML5 porta, mi ha sempre affascinato il tag <canvas>. Ma cos'è? 

Navigando un po' sulla rete ho visto che questo canvas non serve ad altro che a manipolare delle immagini bitmap dinamicamente da javascript. 

Wow! Posso creare un immagine da codice e farla muovere, roteare, animare... Non che la parte grafica sia il mio contesto preferito, ma per bagaglio personale, ho voluto provarlo questo canvas. 

Ho pensato di utilizzare la famosa trollface. 

Per chi non la conoscesse è un MEME utilizzato dopo una frase provocatoria o offesa per far alterare ancora di più l'interlocutore offeso. La frase che spesso la accompagna è "Problems?" . 

In questa mia "animazione" tirerò fuori la trollface dall'area del canvas e farò uno scherzo all'utente che naviga la pagina in pieno stile del MEME.

_________________________________________________________________________________

Innanzitutto, visto che utilizzo un canvas con dimensioni fisse, dichiaro il canvas nella mia pagina html.

 <canvas id="canvas" width="1000" height="600">   
 Il tuo browser non supporta HTML5  
 </canvas>  

Come intuibile se il browser non dovesse essere in grado di processare il tag il contenuto, sarà visualizzato l'innerHTML.

Punto primo: come inserire un immagine in un canvas?

Ricordiamoci fin da subito che l'oggetto che si occupa di fornire i metodi necessari alla gestione del canvas non è il canvas stesso ma il suo Context (In questo caso 2d).

 //recupero il Context   
 canvas = document.getElementById("canvas");   
 ctx = canvas.getContext("2d");   
 //inserisco l'immagine   
 var img = new Image();   
 img.src = 'trollfacemini.png';   
 img.onload = function(){   
                 ctx.drawImage(img,x,y); //x e y sono i punti nel quale verrà scritta l'immagine  
                 ctx.stroke();   
 };  

Così disegno l'immagine nei punti x,y ma cosa devo fare per spostarla?
E' necessario ridisegnare ogni volta l'immagine nei punti desiderati ricordandosi di cancellare quella prima.

N.B. Non sono riuscito a trovare un tutorial o guida che spiegasse bene come aggiungere un oggetto nel context, recuperarlo per Id e spostarlo. Tutte mi riconducevano a questa tecnica che io ,completamente ignorante in toto, ho continuato ad usare nonostante non mi piacesse proprio tanto...  :P

Cooomunque...

ho risolto il tutto grazie agli Interval....
Ho suddiviso la mia animazione in tre step (tre function diverse, ma solo per comodità): al caricamento della pagina faccio partire il primo con frequenza 1ms (la frequenza mi determina la velocità) e a fine dello step, richiamo il successivo.

 var intervalTroll=setInterval(drawTroll, 50);  

Ovviamente qui entra in gioco la malattia dello sviluppatore: io ho fatto così ma potevano essere utilizzati altri n modi per gestire l'animazione.

Uno di questi tre step scrive nel context un testo, utilizzando questi comandi.

 ctx.fillStyle = 'black';  
 ctx.font = 'bold 70px sans-serif';  
 ctx.textBaseline = 'bottom';  
 ctx.fillText('You have been trolled!!', 100, 130);  

E' possibile vedere il risultato finale qui.

Non sto manco a dirlo che suggerimenti, considerazioni, critiche sono ben accette.