WEBVTT 00:00:00.012 --> 00:00:04.574 Il grosso delle interazioni che GRITS ha con Canvas avviene attraverso il rendering delle immagini 00:00:04.586 --> 00:00:08.953 nel canvas stesso. Per poter disegnare un'immagine nel canvas, dobbiamo prima caricarla. 00:00:09.054 --> 00:00:13.204 Per caricare un immagine abbiam bisogno di creare un nuovo oggetto immagine, che 00:00:13.216 --> 00:00:17.661 in Javascript comprende 3 passaggi: numero 1, bisogna dichiarare 00:00:17.673 --> 00:00:22.905 l'oggetto immagine, numero 2, bisogna definire la sua funzione onload e poi, numero 3, 00:00:22.917 --> 00:00:27.270 dobbiamo configurare l'attributo 'image.source'. E' bene notare che nel momento in cui 00:00:27.282 --> 00:00:31.635 si assegna un valore alla proprieta' source, Javascript lancera' 00:00:31.647 --> 00:00:35.975 la funzione onload. Per questo motivo dobbiamo prima specificare la funzione di callback, 00:00:35.987 --> 00:00:40.326 prima di preparare l'attributo source, altrimenti l'immagine carichera' i dati 00:00:40.338 --> 00:00:42.463 e non avra' un callback per riceverli. 00:00:42.469 --> 00:00:47.033 Diamo ora un'occhiata a questo codice: ecco la URL dell'immagine che vorremmo 00:00:47.033 --> 00:00:50.707 che tu caricassi. Vorremmo che tu creassi un nuovo oggetto immagine, seguendo 00:00:50.707 --> 00:00:54.508 i passaggi summenzionati e configurassi la funzione onload e la proprieta' source 00:00:54.508 --> 00:00:58.069 dell'immagine descritta nel codice. Assicurati che alla funzione onload sia 00:00:58.069 --> 00:01:01.693 assegnata questa onImageLoad quaggiu', che in effetti stampera' un bel 00:01:01.693 --> 00:01:04.766 messaggino nel log della console, informandoti del fatto che le cose son state caricate 00:01:04.778 --> 00:01:08.309 a dovere. Se non ti rendi conto se l'immagine sia stata o meno caricata, 00:01:08.309 --> 00:01:12.767 non dimenticarti di controllare gli Strumenti per Sviluppatori di Chrome nella scheda "rete", che mostrera' 00:01:12.779 --> 00:01:15.988 se l'immagine sia stata o meno caricata e quanto ci ha messo.