html5 Canvas Bilder vergrößern

[Zerod]

Hallo,

ich hab ein 60 x 10 große png was ich als tileset nehme.
Ich wollte jetzt mit drawImage() das erste tile vergrößert darstellen, aber wenn ich das jetzt um 10 vergrößere wird das sehr verschwommen angezeigt.

code:
 ctx.drawImage(img,0, 0, 10,10, 0, 0, 100,100);

kann ich da irgend ein parameter hinzufügen damit das pixelgenau vergrößert wird?

ps.:
mit  ctx.scale(10,10); ist es das selbe.

[bleicher]

Grüße,

kann ich da irgend ein parameter hinzufügen damit das pixelgenau vergrößert wird?

du kansnt googeln ob lineare interpolation explizit erzwungen werden kann, oder kopierst die 600 pixel manuell, so viel esinds schon nciht.
es kann sogar egspart werden wenn du monotonen bg hast.
ah ja - und untersuche ob rechteckzeichnen schnelle rgeht als den pixel vergrößert zu kopieren ;)
MFG
bleicher

[LX]

Die Skalierung erfolgt in Canvas immer interpoliert. Du kannst jedoch manuell linear skalieren, in etwa so (Vorsicht, ungetesteter Code):

var context=canvas.getContext('2d');
context.drawImage(img,0,0,10,10);
var img=context.getImageData(0,0,10,10);
var scaled=context.createImageData(100,100), pixel=100*100*4;
while (pixel--) { scaled[pixel]=img[(pixel/100)|0]; }
context.putImageData(scaled, 0, 0);

Gruß, LX