Ne avete i pixel pieni di passare ore a maneggiare software grafici per avere effetti del testo stupefacenti nel vostro sito web? Io sinceramente si, con l’elemento <canvas> e HTML5 è facile ottenere effetti strabilianti sul testo come l’immagine che potete osservare, il tutto scrivendo solamente del codice; vediamo come impreziosire il vostro sito web con poche righe di codice.

Oggi tratteremo un effetto testo statico, in futuro vedremo come creare un’interfaccia ed effetti dinamici con cui l’utente potrà sbizzarrirsi, per il momento iniziamo con le cose semplici: le ombre nel testo.  Perché non farle con i css? Nessuno ve lo vieta, iniziare con le ombre nel testo in <canvas> style significa mettere le basi per l’utilizzo di questa spettacolare estensione per arrivare a creare effetti sempre più complessi.

C’è una premessa doverosa che conoscete già se leggete html5today: al momento non avrete la piena compatibilità con tutti i browser, vi consiglio vivamente di usare Google Chrome.
<canvas>, a differenza di CSS3, ha un solo tipo di ombra con quattro proprietà:
ctx.shadowColor = red // string
Colore dell’ombra;  RGB, RGBA, HSL, HEX, and other inputs are valid.
ctx.shadowOffsetX = 0; // integer
Distanza orizzontale dell’ombra in relazione al testo.
ctx.shadowOffsetY = 0; // integer
Distanza verticale dell’ombra in relazione al testo
Etx.shadowBlur = 10; // integer
Effetto blur dell’ombra, più il valore è alto più aumenta la sfuocatura.

Si parte con JavaScript, diamo alla variabile ctx le proprietà shadow elencate in precedenza (codice colorato in rosso).

<script type="application/x-javascript"> <br />        window.onload = draw; //carico la funzione draw<br />        function draw() {<br />           var ctx = document.getElementById('canvas').getContext('2d');<br />           ctx.shadowOffsetX = 2;<br />           ctx.shadowOffsetY = 2;<br />           ctx.shadowBlur = 2;<br />           ctx.shadowColor = "rgba(0, 0, 0, 0.5)"; <br />           ctx.font = "20px Times New Roman";<br />           ctx.fillStyle = "Black";<br />           ctx.fillText("html5today ombra sul testo", 5, 30); //il testo che vedremo scritto con l'ombra con i margini top e left<br />       }<br />    </script> 

Il body dovrà contenere il tag <canvas> aperto e chiuso </canvas>, il testo al suo interno verrà interpretato dai browsers che non supportano il tag canvas come semplice testo mentre da chi supporta il tag il messaggio di errore chiaramente non verrà visualizzato.

Gli attributi width e height servono per scegliere la dimensione del canvas altrimenti verrà inizializzato come da default (300px in larghezza e 50px in altezza).
<body><br />        <canvas id="canvas" width="500" height="150">Il tuo browser non supporta il tag canvas, prova con Google Chrome</canvas> <br />    </body>
Trovate un file html5 temporaneo con i sorgenti a questo link: textshadow.html