Nella lezione introduttiva abbiamo visto che cosa è un canvas e quali sono le istruzioni javascript per poterlo gestire, adesso vediamo come fare per disegnare al suo interno delle immagini dando per scontato che abbiate letto e compreso la lezione precedente sul disegno delle forme.
createLinearGradient(x,y iniziali, x,y finali)
Il metodo createLinearGradient() serve per creare una sfumatura di colore lineare. Una volta dichiarato il rettangolo e creato il gradiente, per inserire i colori si adopera la proprietà addColorStop. All’interno delle parentesi tonde vanno inserite le coordinate del rettangolo con la consueta formula x e y iniziali e x e y finali.
context.createLinearGradient(0,0,250,150);
Il tuo browser non supporta canvas di html5
</canvas>
var weblink = document.getElementById(“wl”);
var context = weblink.getContext(“2d”);
context.beginPath();
context.rect(0,0,250,150);
var color = context.createLinearGradient(0,0,250,150);
color.addColorStop(0,’#006600′);
color.addColorStop(1,’#66ff66′);
context.fillStyle = color;
context.fill();
</script>
Viene dichiarata una variabile col nome color alla quale viene associato il metodo createLinearGradient, color viene poi usato da addColorStop per gestire l’effetto.
createRadialGradient(x,y iniziali, inizio rad, x,y finali, fine rad)
Il metodo createRadialGradient() serve per creare una sfumatura di colore radiale. Una volta dichiarato il rettangolo e creato il gradiente, per inserire i colori si adopera la proprietà addColorStop. All’interno delle parentesi tonde vanno inserite le coordinate del rettangolo con la consueta formula x e y iniziali, inizioRadiale, x e y finali, fineRadiale.
context.createRadialGradient(120,80,1,120,80,150);
Il tuo browser non supporta canvas di html5
</canvas>
var weblink = document.getElementById(“wl”);
var context = weblink.getContext(“2d”);
context.beginPath();
context.rect(0,0,250,150);
var color = context.createRadialGradient(120,80,1,120,80,150);
color.addColorStop(0, ‘#006600’);
color.addColorStop(1, ‘#66ff66’);
context.fillStyle = color;
context.fill();
</script>
Viene dichiarata una variabile col nome color alla quale viene associato il metodo createRadialGradient, color vien poi usato da addColorStop per gestire l’effetto.
addColorStop(offset, colore)
la proprietà addColorStop serve per inserire il colore e stabilire la sua sfumatura, essendo un gradiente, radiale o lineare, necessita di due colori, uno di inizio e l’altro di fine, quindi oltre ai due colori è possibile stabilire da quale iniziare e con quale finire (offset). I valori ammessi sono 0 e 1 per l’offset e qualsiasi valore esadecimale per il colore. Se si inverte l’offset si inverte la direzione della sfumatura.
color.addColorStop(1,‘#66ff66’);
color.addColorStop(0,‘#66ff66’);
Gli stessi due colori a tinta verde, è sufficiente scambiare il valore 0, 1 (offset) per avere la sfumatura invertita.
createPattern(oggetto immagine, tipo di repeat)
Il metodo createPattern() serve per inserire una immagine che faccia da sfondo, valgono le stesse regole dei css per quanto riguarda il suo repeat: repeat, repeat-x, repeat-y, no-repeat, se si omette il parametro viene assunto per default repeat.
var pattern = context.createPattern(imageObj, ‘repeat’);
context.fillStyle = pattern;
Il tuo browser non supporta canvas di html5
</canvas>
var context = weblink.getContext(“2d”);
var imageObj = new Image();
context.beginPath();
context.rect(0,0,250,150);
imageObj.onload = function() {
var pattern = context.createPattern(imageObj,”repeat”);
context.fillStyle = pattern;
context.fill();};
imageObj.src = “percorso e nome immagine”;
Viene dichiarata una variabile col nome pattern alla quale viene associato il metodo createPattern, pattern viene poi usato da fillStyle per riempire il canvas.
Questo il piccolo pattern usato per l’esempio: 
Per i tipi di immagini valide, valgono le stesse regole di html e css, e cioè: .gif, .png, .jpg.
Il percorso dichiarato per il richiamo dell’immagine grafica può essere di tipo assoluto o relativo.
drawImage(oggetto immagine, x, y)
Il metodo drawImage() serve per inserire una immagine grafica, i valori x e y servono per stabilire il punto preciso del canvas in cui inserirla facendo riferimento all’angolo superiore sinistro dell’immagine usata.
Il tuo browser non supporta canvas di html5
</canvas>
var context = weblink.getContext(“2d”);
var imageObj = new Image();
imageObj.onload = function() {
context.drawImage(imageObj,x,y);
};
imageObj.src = “percorso e nome immagine”;
Questa la piccola immagine usata per l’esempio: 
Per i tipi di immagini valide, valgono le stesse regole di html e css e cioè: .gif, .png, .jpg.
Il percorso dichiarato per il richiamo dell’immagine grafica può essere di tipo assoluto o relativo.
Mi rendo conto che non sia facile seguire la logica del codice di programmazione usato se non si ha un minimo di base sui linguaggi di programmazione. Trovo però del tutto inutile chi io mi metta qui, in questo contesto, a spiegare i passaggi per definire un oggetto in javascript e come utilizzarlo, credo sia sufficiente vedere gli esempi, comprendere il modo di riutilizzarli e senza porsi troppe domande sostituire i riferimenti usati da questa guida con quelli che intendete usare voi. Nell’esempio sopra, non importa capire cosa fa e a cosa serve imageObj.onload ma è sufficiente inserire la vostra immagine, ed il suo percorso per raggiungerla, al posto di quella usata nel mio esempio.
Nella prossima lezione si conclude l’argomento canvas spiegando come disegnare il testo.
Se avete domande potete scrivere sul forum di supporto, gratuito e aperto a tutti.