Corsi on-line

Canvas: immagini ad alta risoluzione sui dispositivi mobili

Ideata dagli sviluppatori della Casa di Cupertino durante l’implementazione del rendering engine WebKit per il browser Web Safari, canvas rappresenta un’estensione di HTML utilizzabile per la resa grafica di immagini Bitmap manipolabili tramite  linguaggi per lo scripting come per esempio JavaScript; più estesamente è possibile descrivere canvas come un’API (Application Programming Interface), cioè un’interfaccia, per il disegno basato su Bitmap che funziona come un’immagine caricata da un file.

Safari

Sulla base di quanto appena descritto, è possibile sostenere che nel caso in cui venga generato un canvas della larghezza di 350 pixel esso creerà a sua volta (contestualmente) un’immagine reale delle stesse dimensioni; dal punto di vista pratico avremo un output largo 350 pixel CSS al di là della risoluzione di riferimento.

La risoluzione non rappresenta però un fattore secondario ai fini del rendering, sopratutto tenendo conto del fatto che questa potrebbe subire delle modifiche a seconda del display utilizzato.

Per fare un esempio, nello schermo di un iPhone 5s (dotato di una diagonale da 4 pollici e supporto per la tecnologia Retina), un’immagine da 200 pixel verrà ridimensionata fino a 400 pixel, l’utilizzo del verbo “ridimensionare” non rappresenta un errore, infatti in questo caso si parla di “device pixel”. Tale comportamento sarà causa di una perdita di qualità in termini di risoluzione, motivo per il quale per ottenere un output ad alta risoluzione sarà necessario comunicare al browser una dimensione doppia rispetto a quella originale:

<canvas width="400" height="400" style="width: 200px; height: 200px"></canvas>
<script>
document.queryselector("canvas").getContext("2d").scale(2, 2);
</script>

In pratica tale operazione prevede di raddoppiare i pixel di un’immagine in modo da non perdere nulla in quanto a risoluzione nonostante la riduzione operata sul display del device mobile.

Come è possibile notare, si tratta di una tecnica molto semplice da utilizzare, si tenga conto però che le immagini ottenute tramite canvas vengono prodotte dinamicamente e che la generazione di ciascuna immagine richiede un certo impegno di risorse da parte della CPU, motivo per il quale l’impiego di tale accorgimento determinerà anche un raddoppio delle risorse necessarie.

Via Safari HTML5 Canvas Guide

Post correlati
I più letti del mese
Tematiche