canvas drawing

[VisRoboris]

Salve!
Ho una pagina html5 che fa uso di uno script in javascript che carica un'immagine
e la disegna in un canvas.

<script type="text/javascript">
      function draw()
      {
        var canvas = document.getElementById('my_canvas');
	var img = new Image();
	img.src = 'screen0.jpg';
        if (canvas.getContext){
          var ctx = canvas.getContext('2d');
          ctx.drawImage(img,0,0);
	  //ctx.fillStyle = "rgba(0,0,0,38)";
          //ctx.fillRect(0,canvas.height-80,canvas.width,80);
        }
      }
</script>

Quello che non capisco è perchè l'immagine, invece di essere disegnata con le sue dimensioni originali, venga molto allargata in entrambe le dimensoni.
Inoltre il rettangolo che provo a disegnarci subito sopra, sebbene solo con 38 come alpha, viene disegnato completamente opaco, tale da oscurare l'immagine sottostante.

Perchè succedono queste cose? Probabilmente sono questioni banali ma sono ancora agli inizi...

[cavicchiandrea]

Metti la pagina online e riporta qui il link alla stessa

[VisRoboris]

http://gmtgames.altervista.org/lrn/homepage.htm

[cavicchiandrea]

Io con firefox 15 non vedo nulla tranne lo sfondo

[lucavizzi]

Originariamente inviato da cavicchiandrea
Io con firefox 15 non vedo nulla tranne lo sfondo

Perchè non hai l'immagine nella cache, lo script non attende il caricamento...

<script type="text/javascript">
      function draw()
      {
        var canvas = document.getElementById('my_canvas');
	var img = new Image();
	img.src = 'screen0.jpg';
        img.onload=function(){
          if (canvas.getContext){
          var ctx = canvas.getContext('2d');
          ctx.drawImage(img,0,0);
	  //ctx.fillStyle = "rgba(0,0,0,38)";
          //ctx.fillRect(0,canvas.height-80,canvas.width,80);
        }
       }
      }
</script>

[VisRoboris]

ahn...quindi l'immagine viene scaricata a metà e mostrata stretchata per mancanza di informazioni.. grazie!

[lucavizzi]

Originariamente inviato da VisRoboris
ahn...quindi l'immagine viene scaricata a metà e mostrata stretchata per mancanza di informazioni.. grazie!

Non ho detto questo, la vedrai comunque come prima.

[VisRoboris]

beh.. almeno risolvo un problema

[VisRoboris]

Risolto, c'erano ancora due problemi:
1: la dimensione del canvas non era specificata nella pagina in html, quindi presumibilmente ha assunto una dimensione di default che è stata cambiata poi dal foglio di stile css (che utilizzavo per impostarne la dimensione). Ho risolto spostando la definizione delle proprietà width e height dal css al tag in html
2: la funzione context.drawImage disegnava con qualche opzione strana, che ho sistemato specificando anche gli argomenti width e height.