Sopra si è impostato l'`id`entificativo, la larghezza `(width)` e l'altezza (`height`).
-`id`: va impostato in modo da poter ottenere un riferimento quando si deve interagire con l'elemento.
-`width`: questa è la larghezza dell'elemento.
-`height`: questa è l'altezza dell'elemento.
## Disegnare una geometria semplice
Canvas utilizza un sistema di coordinate cartesiane per disegnare le cose. Quindi utilizza un asse x e un asse y per esprimere dove si trova qualcosa. La posizione `0,0` è la posizione in alto a sinistra e quella in basso a destra è ciò che si è determinato come larghezza (WIDTH) e altezza (HEIGHT) del canvas
> Immagine da [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)
Per disegnare sull'elemento canvas si dovranno eseguire i seguenti passaggi:
1.**Ottenere un riferimento** all'elemento Canvas.
1.**Ottenere un riferimento** all'elemento Context che si trova sull'elemento canvas.
1.**Eseguire un'operazione di disegno** utilizzando l'elemento context.
Il codice per i passaggi precedenti di solito ha questo aspetto:
```javascript
// disegna un rettangolo rosso
//1. ottiene il riferimento per il canvas
canvas = document.getElementById("myCanvas");
//2. ottiene l'oggetto context per disegnare forme basiche in 2D
ctx = canvas.getContext("2d");
//3. lo riempie con il colore rosso
ctx.fillStyle = 'red';
//4. e disegna un rettangolo con questi parametri, impostando posizione e dimensione
✅ L'API Canvas si concentra principalmente su forme 2D, ma si possono anche disegnare elementi 3D su un sito web; per questo, si potrebbe utilizzare l' [API WebGL](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API).
Si può disegnare ogni sorta di cose con l'API Canvas come:
- **Forme geometriche**, è già stato mostrato come disegnare un rettangolo, ma c'è molto di più che si può disegnare.
- **Testo**, si può disegnare un testo con qualsiasi carattere e colore si desideri.
- **Immagini**, si puòdisegnare un'immagine basandosi su una risorsa immagine come .jpg o .png, ad esempio.
Si faccia una prova! Si sa come disegnare un rettangolo, si può disegnare un cerchio su una pagina? Si dia un'occhiata ad alcuni interessanti disegni su canvas su CodePen. Ecco un [esempio particolarmente degno di nota](https://codepen.io/dissimulate/pen/KrAwx).
## Caricare e disegnare una risorsa immagine
Si carica una risorsa immagine creando un oggetto `Image` e impostando la sua proprietà `src` . Quindi ci si mette in ascolto per l'evento di caricamento (`load`) per sapere quando è pronto per essere utilizzato. Il codice si presenta cosí:
### Caricamento risorsa
```javascript
const img = new Image();
img.src = 'path/to/my/image.png';
img.onload = () => {
// immagine caricata e pronta all'uso
}
```
### Modello di Caricamento Risorsa
Si consiglia di racchiudere quanto sopra in un costrutto come questo, così è più facile da usare e si tenta di manipolarlo solo quando è completamente caricato:
```javascript
function loadAsset(path) {
return new Promise((resolve) => {
const img = new Image();
img.src = path;
img.onload = () => {
// immagine caricata e pronta all'uso
resolve(img);
}
})
}
// usarlo in questo modo
async function run() {
const heroImg = await loadAsset('hero.png')
const monsterImg = await loadAsset('monster.png')
}
```
Per disegnare risorse di gioco su uno schermo, il codice sarà simile a questo:
## Ora è il momento di iniziare a costruire il gioco
### Cosa costruire
Si costruirà una pagina web con un elemento Canvas. Si dovrebbe rendere uno schermo nero `1024 * 768`. Sono state fornite due immagini:
- Astronave dell'eroe
- Mostro 5*5
### Passaggi consigliati per iniziare lo sviluppo
Individuare i file che già sono stati creati nella sottocartella `your-work` della cartella di lavoro Dovrebbe contenere le seguenti informazioni:
```bash
-| assets
-| enemyShip.png
-| player.png
-| index.html
-| app.js
-| package.json
```
Aprire una copia di questa cartella in Visual Studio Code. È necessario disporre di una configurazione di ambiente di sviluppo locale, preferibilmente con Visual Studio Code con NPM e Node installati. Se non si è impostato `npm` sul proprio computer, [ecco come farlo](https://www.npmjs.com/get-npm).
Inizializzare il proprio progetto accedendo alla cartella `your_work` :
```bash
cd your-work
npm start
```
Quanto sopra avvierà un server HTTP sull'indirizzo `http://localhost:5000`. Aprire un browser e inserire quell'indirizzo. Al momento è una pagina vuota, ma cambierà
> Nota: per vedere le modifiche sullo schermo, aggiornare il contenuto del browser.
### Aggiungere codice
Aggiungi il codice necessario al file `your-work/app.js` per risolvere quanto segue
1.**Disegnare** un oggetto canvas con sfondo nero
> suggerimento: aggiungere due righe sotto il TODO appropriato in `/app.js`, impostando l'elemento `ctx` in modo che sia nero e le coordinate alto/sinistra a 0,0 e l'altezza e la larghezza uguali a quelle del canvas.
2.**Caricare** le strutture di gioco
> suggerimento: aggiungere le immagini del giocatore e del nemico usando `await loadTexture`, passando il percorso dell'immagine. Non saranno ancora visibili sullo schermo!
3.**Disegnare** l'eroe al centro dello schermo nella metà inferiore
> suggerimento: usare l'API `drawImage` per disegnare `heroImg` sullo schermo, impostando `canvas.width / 2 - 45` e `canvas.height - canvas.height / 4` come valori di coordinate x, y
4.**Disegnare** mostri 5*5
> suggerimento: ora si può rimuovere il commento dal codice per disegnare i nemici sullo schermo. Successivamente, passare alla funzione `createEnemies` e crearla.
quindi, creare un ciclo per disegnare l'array di mostri sullo schermo:
```javascript
for (let x = START_X; x <STOP_X;x+=98){
for (let y = 0; y <50*5;y+=50){
ctx.drawImage(enemyImg, x, y);
}
}
```
## Risultato
Il risultato finale dovrebbe essere così:
## Soluzione
Per favore provare a risolverlo da soli, ma se si rimane bloccati, dare un'occhiata alla [soluzione](../solution/app.js)
---
## 🚀 Sfida
Si è imparato a disegnare con l'API Canvas incentrata sul 2D; dare un'occhiata all['API WebGL API](https://developer.mozilla.org/it/docs/Web/API/WebGL_API) e provare a disegnare un oggetto 3D.
