Newsgroup: it.comp.lang.javascript
Titolo: Lavagna virtuale

Buongiorno.
Eccomi di nuovo qui.
 
Chiedo una cosa.
 
Guardate questo sito:
 
http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app/
 
 
Si descrive come costruire una lavagna virtuale, avente alcune funzioni, tra cui "clear".
Soffermiamoci solo su CLEAR.
 
Nel primo step, dove c'è solo la funzione "clear", potete disegnare nella parte bianca e poi, premendo "clear", tutto scompare.
Ma se io volessi fare una funzione come quella scritta qualche riga piu' sopra (clearRect) NON FUNZIONA!!
 
Com'è possibile una cosa del genere?????
 
Io vorrei una funzione che al click del "clear" cio' che viene disegnato scompaia, perche' il mio div in cui disegno ha uno sfondo "transparent", cosa che clearRect non accetta!
 
Non e' che la funzione clearRect in realta' COLORA il div di bianco???
Io vorrei che cio' che disegno SCOMPAIA dalla faccia della terra, e non che venga sovrascritto da altri pixel bianchi.
 
E' inammissibile.
Grazie

 E' inammissibile.
 
Non credo di aver capito la tua domanda, ma il canvas funziona così: per 
cancellare semplicemente sovrascrivi i pixel con il colore bianco.
 
Non ho mai provato a usare un colore rgba con la trasparenza al massimo, 
magari vedi se funziona così.
 
Bye.

 Bye.
 
La domanda l'hai capita benissimo.
Ma e' come pensavo.
La trasparenza massima l'ho gia' provata sul canvas, e NON VA.
Il problema di quella lavagna è questo. Vediamo se riesco a farmi capire.
 
Io voglio fare una lavagna virtuale. Per fare questo, basandomi su quel sito, faccio una cosa cosi':
 
1) <div> sotto  (con z-index=1) che rappresenta un campo di basket. Attenzione: questo div è un normalissimo rettangolo riempito con colore "fill" arancione e alcune righe bianche a formare i limiti del campo (aree, lunette ecc. ecc.). 
Le righe bianche, anch'esse dei piccoli <div>, DEVONO SEMPRE ESSERE VISIBILI ma INTOCCABILI. Per capirci, faccio una cosa del tipo:
 
<div id="CAMPO" style="z-index:1;">
  <div id="RIGA1">...</div>
  <div id="RIGA2">...</div>
  ....
</div>
 
2) <div> sopra (con z-index=10) che è il canvas che rappresenta la lavagna. Questo canvas (sempre di forma rettangolare ed esattamente in corrispondenza del <div> sotto) secondo il sito in questione puo' essere scarabocchiato con pennarelli di vario colore e vario spessore, che poi a me sta benissimo.
 
 
Ho fatto come scritto nel sito e la lavagna virtuale funziona perfettamente, tranne la funzione CLEAR.
Questa funzione, che mi serve moltissimo, nel sito SOVRASCRIVE con pixel dello stesso colore dello sfondo. Ma io ho impostato lo sfondo del canvas su "transparent" per ovvi motivi.
Il risultato è che:
 
- il canvas "lavagna" sta sopra il <div> "CAMPO" ed è trasparente
- sul canvas "lavagna" riesco tranquillamente a scarabocchiare con i pennarelli
- la funzione clear non va perche' (credo) i pixel dei miei scarabocchi non so che origine abbiano, sono fatti sul momento, non riesco a dar loro la proprieta' "transparent". 
Se io dessi a "clear" il colore arancione tutto si cancellerebbe (in modo furfantesco) nel senso che ci sovrascriverei in arancione, ma ovviamente NASCONDEREI anche le righe bianche!! E' questo che non concepisco.
 
Ecco cio' che voglio dire.

 E' inammissibile.
 
Esagerato.
 
 

 riesco a dar loro la proprieta' "transparent".
 
OK, ora ho capito cosa stai facendo.
 
Invece di usare clean, prova a usare fillRect per riempire tutto il 
canvas, impostando prima.
 
context.fillStyle = "rgba(0, 0, 0, 0)";
 
Questo riempie la canvas di pixel neri ma completamente trasparenti.
 
Bye.


FUNZIONA PERFETTAMENTE.
SPETTACOLO.
 
Mi ero perso in un bicchier d'acqua!
Grazie sia a te che ad Alessandro Pellizzari.
 
Alla prossima per ulteriori nuove entusiasmanti avventure!!!