Forum PHP.pl

Jak w temacie - obrazki wstrzykiwane do elementu canvas zostają rozciągnięte bez żadnej ingerencji z mojej strony (kod mootools):

[JAVASCRIPT] pobierz, plaintext 
 
var element = new Element('img', {
    'src': this.randomElement,
    'styles': {
    'display': 'block',
    'margin': '0 auto'
  }
});
 
if(this.useCanvas) {
    element.inject(small);
    var ctx = tetrisTable.getContext('2d');
    ctx.drawImage(element, 0, 0);
}
 
[JAVASCRIPT] pobierz, plaintext 

Problemem jest rozmiar elementu canvas - jeśli nie zostanie ostylowany, obrazki nie skalują się. Jednak chciałbym aby przybrał on określony rozmiar. Nadawanie obrazkom z góry narzuconych rozmiarów odpada, ponieważ każdy ma inny rozmiar. Widzicie jakieś wyjście z tej sytuacji?

No więc znalazłem odpowiedź - kiedy wymiary canvas nada się poprzez css, obrazy zostają przeskalowane, kiedy natomiast do elementu canvas dodamy atrybuty, np.

[HTML] pobierz, plaintext 
 
<canvas id="canvas" width="300" height="600"></canvas>
 
[HTML] pobierz, plaintext 

wszystko gra. Dziwne to, bo w końcu po to jest css, żeby jedno oddzielić od drugiego, ale cóż... Mam nadzieję, że komuś to pomoże.

A to w css nie da się już ustawić width i height ?

Da się, ale canvas jest na tyle specyficznym obiektem, że dzieją się m.in. cyrki, jak ten wspomniany, jeśli nie nadasz wymiarów bezpośrednio w atrybutach.

Zresztą, nie widzę sensu nadawania wymiarów via CSS, skoro płótno jest i tak obsługiwane przez JS (semantycznie, powinien być dodawany dynamicznie, przez skrypt).