Canvas javascript : Disegnare figure regolari
Tags: javascript, canvas, disegno, rettangolo
Published: 2020-12-27 10:27:54

---
title: Canvas javascript : Disegnare figure regolari
published: true
description: Come disegnare figure regolari sul canvas 
tags: javascript, canvas, disegno, rettangolo
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/vq41h7kh6d2c4qpsc7ar.jpg
---
Vediamo come disegnare delle figure geometriche nel canvas con il tool di funzioni che ci mette a disposizione il metodo `getContext`.

Per prima cosa prepariamo il canvas, ho scritto un post: [Canvas javascript : Un potente strumento per la grafica sul web](https://dev.to/camizzilla/canvas-javascript-un-potente-strumento-per-la-grafica-sul-web-4334), dove scrivo un po' più approfonditamente: cos'è il canvas, quando si usa e come inizializzarlo, quindi non mi dilungherò su questo punto.


```javascript
let canvas = document.getElementById('myCanvas');
canvas.width = 600;
canvas.height = 400;

let ctx = canvas.getContext('2d');
``` 

Ma prima di iniziare a disegnare a schermo **vediamo come funziona la griglia** così sarà più facile comprendere le dinamiche.


##GRIGLIA
**Il canvas è una griglia di pixel sviluppata su un piano cartesiano** che parte dal punto di origine O e si sviluppa sull’asse delle X in larghezza e sull’asse delle Y in lunghezza.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ca3qgf8q2mbr9xo0jety.jpg)

**Grazie alle coordinate** della griglia possiamo **posizionare degli oggetti bidimensionali nello spazio**.

Nella figura sottostante ho posizionato un quadrato di 40X40 pixel nelle coordinate x:50 e y:40 rispetto al punto di origine 0, che ha coordinate x:0, y:0.

Le coordinate vengono calcolate dal vertice in alto a sinistra.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/czeqvvtm6jygru8nx5uh.jpg)

Nel programma sottostante fatto da [casiimir](https://dev.to/casiimir), al passaggio del mouse si possono vedere, dinamicamente, le coordinate in una griglia 400x400.

{% codepen https://codepen.io/camizzilla/pen/MWbePWq default-tab=results %}

##RETTANGOLO
Per visualizzare dei rettangoli ci sono tre funzioni:
* _fillRect(x, y, width, height)_
  Che disegna un **rettangolo pieno**
* _strokeRect(x, y, width, height)_
  Che disegna **il bordo di un rettangolo**
* _clearRect(x, y, width, height)_
  Che **cancella una porzione di forma rettagolare**

Tutte e 3 queste funzioni prendo come attributi, le coordinate per posizionarlo sul canvas (x, y) e le dimensioni, larghezza e altezza (width, height).

```javascript
ctx.fillRect(50, 50, 100, 100);
ctx.strokeRect(200, 50, 100, 100);

ctx.fillRect(350, 50, 100, 100);

ctx.clearRect(350, 50, 50, 50);
```
Con _fillRect_ abbiamo disegnato un quadrato 100x100px e lo abbiamo posizionato al 50esimo px della griglia sia in altezza che in larghezza, poi con _fillRect_ abbiamo disegnato di fianco al primo una cornice quadrata della stessa dimensione.
Per far vedere come funziona _clearRect_ abbiamo creato un quadrato uguale al primo e nella stessa posizione abbiamo cancellato un rettangolo di 50px per lato.

Questo è il risultato
{% codepen https://codepen.io/camizzilla/pen/LYRjKyx %}

Così monocromantici non sono molto allegri, ma per lo stile ho deciso che creerò un post dedicato, anche perchè c'è ne da dire anche su questo argomento e non volevo fare un papiro.

##PATH
Per disegnare tutte la altre figure che non siano rettangoli, dobbiamo conoscere la funzione `beginPath()`, che **tiene traccia dei punti della figura geometrica che andremo creare**.

Per capire meglio il _beginPath_  disegnamo un linea retta.

## Linea
Con questo script creeremo una linea retta di due punti.

```javascript
ctx.beginPath();
ctx.moveTo(50, 100);
ctx.lineTo(300, 100);
ctx.stroke();
```
* Con `beginPath()` **creiamo un nuovo _percorso_** di coordinate.
* `moveTo` **crea un punto senza che questo venga tracciato**.
* `lineTo` **crea un punto che si traccerà con una linea** che parte dal punto precedente e arriva nella coordinate passate come argomento.
* `stroke` **disegna le linee unendo i punti salvati** nel path, senza questa funzione non verrebbe renderizzato nulla a schermo.

### Linea tratteggiata
In questo path alterniamo `moveTo` con `lineTo` per creare una linea tratteggiata.

```javascript
ctx.beginPath();
ctx.moveTo(50, 150);
ctx.lineTo(100, 150);
ctx.moveTo(150, 150);
ctx.lineTo(200, 150);
ctx.moveTo(250, 150);
ctx.lineTo(300, 150);
ctx.stroke();
```
Nella linea tratteggiata si vede meglio **l'utilità del moveTo che si sposta sulla griglia senza essere tracciata**.

### Linea frastagliata

```javascript
ctx.beginPath();
ctx.moveTo(50, 275);
ctx.lineTo(100, 200);
ctx.lineTo(200, 270);
ctx.lineTo(300, 210);
ctx.stroke();
```
Per creare una linea frastagliata bisogna creare vari punti sul canvas e poi collegarli.

Questo è il risultato

{% codepen https://codepen.io/camizzilla/pen/wvzrpXB %}

## FIGURE GEOMETRICHE PIANE
Una volta imparato il funzionamento delle linee, **le figure piane non sono altro un serie di linee... chiuse**.

Ad esempio se volessimo **fare un triangolo** non dobbiamo fare altro che **creare 3 punti**, in cui **l'ultimo punto deve avere le coordinate del primo punto**, nel nostro caso il `moveTo`.

```javascript
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(200, 50);
ctx.lineTo(200, 150);
ctx.lineTo(50, 50);
ctx.stroke();
```

Un'altra opzione per chiudere una figura piana è sostituire l'ultimo punto, quello che torna alla coordinata iniziale, con la funzione `closePath` che chiude il percorso e la figura creata automaticamente.

 ```javascript
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(200, 50);
ctx.lineTo(200, 150);
ctx.closePath()
ctx.stroke();
```

Con questi codici abbiamo stampato a video il _perimetro_ di un triangolo, perchè la funzione `stroke` **unisce i vari punti con delle linee**. Se volessimo **avere delle figure piene** non dovremmo dare altro che sostituire `stroke` **con la funzione **`ctx.fill()`. 
Ecco degli esempi di figure geometriche. 
{% codepen https://codepen.io/camizzilla/pen/BaLwJVa %}

##CONCLUSIONE

In questo abbiamo appreso come disegnare sul canvas delle figure geometriche regolari.
Nel prossimo post "[Disegnare figure geometriche con le curve](https://dev.to/camizzilla/canvas-javascript-disegnare-figure-geometriche-con-curve-1l63)" andremo a conoscere anche le figure con curve, tra cui il cerchio.

Se avete dei consigli, suggerimenti o critiche costruttive lasciatemi un commento qui sotto oppure contattatemi trammite i miei social.