Canvas javascript : Un potente strumento per la grafica sul web
Tags: javascript, canvas, html
Published: 2020-12-19 20:19:28

---
title: Canvas javascript : Un potente strumento per la grafica sul web
published: true
description: Cos'è il canvas e come implementarlo in maniera semplice
tags: Js, Javascript, canvas, html
//cover_image: https://direct_url_to_image.jpg
---
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/59r8ezqcdd9ln4xxhyre.jpg)
Il `<canvas>` è un **elemento Html5 per la grafica gestita interamente da javascript**, ideale per le animazioni 2d o 3d, videogiochi, manipolazioni di foto e video.

Nato come sostituto del defunto _Flash_, una tecnologia di terze parti che ha spopolato negli anni 2000 proprio per le animazioni incredibili che portava sul web, ma viste fino a quel momento, ma, aveva seri problemi di sicurezza quindi si è deciso di rimpiazzarlo con un **elemento html nativo**.

L'elemento canvas ci permette di creare una tela digitale (canvas in inglese si traduce con tela) su nostro browser. Quindi ci permette di creare **uno spazio rettangolare**, delle dimensioni che vogliamo, **dove poter creare i nostri capolavori digitali**.


##Pro 🔺 e contro 🔻 del canvas

**Quando è perché bisogna usarlo e quando** invece sono meglio altre soluzioni

###Pro
* Le **animazioni** sono molte più **veloci e fluide**.
* **Controllo totale** su tutti gli elementi **grazie al javascript**.
* **Gestione della memoria ottimizzata**. Questo significa, notevole risparmio di memoria.
* **Elevata gestione di calcolo**. Esempio: nei videogiochi dove ogni secondo ( il tempo dipende dal frame rate ) bisogna calcolare spostamenti, collisioni, input della tastiera o del mouse su svariati oggetti presenti nel canvas c’è bisogno di una tecnologia in grado di gestire tutto ciò senza rallentamenti.

###Contro

* **Complesso, che non vuol dire complicato**, ma va certamente studiato e compreso!
* **Se nel vostro progetto dovete animare pochi elementi**, magari al click del mouse o non avete bisogno di un refresh continuo, è inutile complicarsi la vita con il canvas, **vi conviene gestirlo con il css**.
* Perde di fluidità all’aumentare delle dimensioni e del numero di elementi da gestire.


##HTML
Essendo, il canvas, gestito interamente da javascript, il file html sara un documento basico con un **tag `<canvas>`**.
Quest'ultimo **avrà come attributo un identificativo** (id), che con tanta fantasia, chiameremo **“myCanvas”**.

```html
<html>
   <head>
     <meta charset="UTF-8">
     <title>Platform game - single screen</title>
     <link rel="stylesheet" type="text/css" href="style.css">
   </head>

   <body>
     <canvas id="myCanvas"></canvas>
   </body>

   <script src="main.js"></script>
 </html>
```

Il documento html, inoltre, chiamerà:
 * un file main.js, da dove gestiremo il tutto.
 * un file css, che anche se non è indispensabile, darà un po' di stile.

##CSS
Nello stile css centreremo il canvas al centro dello schermo e gli mettiamo un bordo nero per renderlo visibile.

```css
body {
     display: flex;
     align-items: center;
     justify-content: center;
     height: 100vh;
 }

canvas {
     border: 3px solid black;
 }
```


##JS
Questa è la parte più importante e un po' più complessa, quindi in questo post vedremo solo come inizializzarlo.

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

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

Questa è la **porzione di codice base che inizializza il canvas**. La useremo per molti progetti che utilizzano questa tecnologia, quindi molto spesso. 

Abbiamo catturato l’elemento `<canvas>` grazie al comando javascript `document.querySelector("#myCanvas");` tramite il suo identificativo #myCanvas e lo abbiamo salvato nella variabile canvas.

Abbiamo assegnato **l’altezza e la larghezza** al canvas grazie alle proprietà **width e height**, di default le dimensioni sono di 300px x 150px.

Con il **metodo _getContext_ abbiamo specificato il contesto con il quale lavorare**, nel nostro caso è il ‘2d’ e con esso avremo accesso a delle funzioni che ci permetteranno disegnare e manipolare la tela bidimensionale.

Se al posto del contesto “2d”, avessimo specificato “webgl”, ora lavoreremo con dei metodi per il “3d”.

##CONCLUSIONE
Questo è il risultato, per adesso è un po' triste, ma quello che abbiamo appreso **oggi è solo la punta di un iceberg**, nei prossimi post svisceremo molte potenzialità di questa fantastica tecnologia.

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

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