[JS/HTML5] Skalowanie elementu <canvas>

[Konrad-GM]

Joł joł,

 

spotkał mnie pewien problem - a mianowicie z "wyłączeniem" interpolacji przy rysowaniu skalowanego elementu w przeglądarce Mozilla Firefox. Otóż aby osiągnąć styl rozpikselowania używam dwóch canvasów. Jeden ukryty, odpowiada za wstępne rysowanie a'la "backbuffer". Drugi zaś jest kilkakrotnie (4x) większy niż jego poprzednik. Aby skopiować zawartość pierwszego płótna, używam coś takiego:

present: function(canvas, smooth){
    var ctx = canvas.getContext("2d");

    ctx.scale(canvas.width/this.width,
              canvas.height/this.height);

    ctx.webkitImageSmoothingEnabled = 
    ctx.mozImageSmoothingEnabled =
    ctx.msImageSmoothingEnabled =
    ctx.oImageSmoothingEnabled =
    ctx.imageSmoothingEnabled = false;

    ctx.fillStyle = ctx.createPattern(this.canvas, 'no-repeat');
    ctx.fillRect(0, 0, this.width, this.height);
}

Gdzie:

this - to obiekt który posiada zmienną "canvas", która z kolei służy do przechowywania ukrytego elementu canvas.

canvas - to element canvas który jest tym "frontbufferem", naszym celem.

 

W Chromie działa ok, ale Firefox skalując traktuje obrazek interpolacją. A to wygląda już tak:

 

Chrome:

 

Firefox:

 

Czy znacie może jakieś efektywniejsze sposoby aby osiągnąć skalowanie przy braku interpolacji? (nearest neighbor) A może istnieje rozwiązanie tego problemu dopisując pewne części non-standard? Skalowanie ma się odbywać co klatka (30/60 fps). Także kopiowanie całości poprzez getImageData/putImageData odpada.

 

Pozdrawiam,

Konrad-GM

[Konrad-GM]

Ok, rozwiązałem problem. Zmieniłem "createPattern>fillStyle>fillRect" na "drawImage". Już jest ok :)

 

Dzięki temu: http://vaughnroyko.com/jsfiddle/nearest-neighbor.html

 

presentViaDrawImage: function(canvas) {
    var ctx = canvas.getContext("2d");

    ctx.scale(canvas.width/this.width,
              canvas.height/this.height);

    ctx.webkitImageSmoothingEnabled = 
    ctx.mozImageSmoothingEnabled =
    ctx.msImageSmoothingEnabled =
    ctx.oImageSmoothingEnabled =
    ctx.imageSmoothingEnabled = false;

    ctx.drawImage(this.canvas, 0, 0);
}