vincent thorpe
Reputation: 294
Javascript: canvas, blury image issue?
so I was specting why there's a blury drawing of the image in the canvas when I press the D keyboard, everything else works fine. I don't know if there's something in the way I draw this image, and also the context or translate method. Thanks for your help
var Imagen= { // image to load, and manipulate
obj: null,
ruta: null,
cargar: function() {
this.obj= new Image();
//this.obj.src= '/C:/Documents and Settings/casa/Mis documentos/Mis imágenes/sprite.png';
this.obj.src= 'https://s22.postimg.org/6r8uzrygh/sprite.png';
},
ini: [2, 1],
fin: [22, 38],
pos: [0, 1],
auxy: [0, 1],
vel: {
des: 0.4,
som: 0.1
}
};
var Lienzo= { // this is the canvas
obj: document.getElementById('lienzo'),
ancho: 600,
alto: 300
};
var Sombra= { // this is for the sprites
fg1: function() {
Imagen.ini[0]= 2 +48*0; // recortes de la imagen
Imagen.ini[1]= 1; // recortes de la imagen
Imagen.pos[0]= Imagen.auxy[0];
Imagen.pos[1]= Imagen.auxy[1];
c.drawImage(Imagen.obj, Imagen.ini[0], Imagen.ini[1], Imagen.fin[0], Imagen.fin[1], Imagen.pos[0], Imagen.pos[1], Imagen.fin[0], Imagen.fin[1]);
},
fg2: function() {
Imagen.ini[0]= 2 +48*1;
Imagen.ini[1]= 0;
Imagen.pos[0]= Imagen.auxy[0];
Imagen.pos[1]= Imagen.auxy[1] -1;
c.drawImage(Imagen.obj, Imagen.ini[0], Imagen.ini[1], Imagen.fin[0], Imagen.fin[1], Imagen.pos[0], Imagen.pos[1], Imagen.fin[0], Imagen.fin[1]);
},
fg3: function() {
Imagen.ini[0]= 2 +48*2;
Imagen.ini[1]= 1;
Imagen.pos[0]= Imagen.auxy[0];
Imagen.pos[1]= Imagen.auxy[1];
c.drawImage(Imagen.obj, Imagen.ini[0], Imagen.ini[1], Imagen.fin[0], Imagen.fin[1], Imagen.pos[0], Imagen.pos[1], Imagen.fin[0], Imagen.fin[1]);
},
fg4: function() {
Imagen.ini[0]= 2 +48*3;
Imagen.ini[1]= 1;
Imagen.pos[0]= Imagen.auxy[0];
Imagen.pos[1]= Imagen.auxy[1];
c.drawImage(Imagen.obj, Imagen.ini[0], Imagen.ini[1], Imagen.fin[0], Imagen.fin[1], Imagen.pos[0], Imagen.pos[1], Imagen.fin[0], Imagen.fin[1]);
},
fg5: function() {
Imagen.ini[0]= 2 +48*4;
Imagen.ini[1]= 0;
Imagen.pos[0]= Imagen.auxy[0];
Imagen.pos[1]= Imagen.auxy[1] -1;
c.drawImage(Imagen.obj, Imagen.ini[0], Imagen.ini[1], Imagen.fin[0], Imagen.fin[1], Imagen.pos[0], Imagen.pos[1], Imagen.fin[0], Imagen.fin[1]);
},
fg6: function() {
Imagen.ini[0]= 2 +48*5;
Imagen.ini[1]= 1;
Imagen.pos[0]= Imagen.auxy[0];
Imagen.pos[1]= Imagen.auxy[1];
c.drawImage(Imagen.obj, Imagen.ini[0], Imagen.ini[1], Imagen.fin[0], Imagen.fin[1], Imagen.pos[0], Imagen.pos[1], Imagen.fin[0], Imagen.fin[1]);
},
fg7: function() {
Imagen.ini[0]= 2 +48*6;
Imagen.ini[1]= 1;
Imagen.pos[0]= Imagen.auxy[0];
Imagen.pos[1]= Imagen.auxy[1];
c.drawImage(Imagen.obj, Imagen.ini[0], Imagen.ini[1], Imagen.fin[0], Imagen.fin[1], Imagen.pos[0], Imagen.pos[1], Imagen.fin[0], Imagen.fin[1]);
},
fg8: function() {
Imagen.ini[0]= 2 +48*7;
Imagen.ini[1]= 0;
Imagen.pos[0]= Imagen.auxy[0];
Imagen.pos[1]= Imagen.auxy[1] -1;
c.drawImage(Imagen.obj, Imagen.ini[0], Imagen.ini[1], Imagen.fin[0], Imagen.fin[1], Imagen.pos[0], Imagen.pos[1], Imagen.fin[0], Imagen.fin[1]);
},
fg9: function() {
Imagen.ini[0]= 2 +48*8;
Imagen.ini[1]= 1;
Imagen.pos[0]= Imagen.auxy[0];
Imagen.pos[1]= Imagen.auxy[1];
c.drawImage(Imagen.obj, Imagen.ini[0], Imagen.ini[1], Imagen.fin[0], Imagen.fin[1], Imagen.pos[0], Imagen.pos[1], Imagen.fin[0], Imagen.fin[1]);
},
fg10: function() {
Imagen.ini[0]= 2 +48*6;
Imagen.ini[1]= 1;
Imagen.pos[0]= -Imagen.auxy[0] -22;
Imagen.pos[1]= Imagen.auxy[1];
c.save();
c.translate(0, 0);
c.scale(-1 ,1);
c.drawImage(Imagen.obj, Imagen.ini[0], Imagen.ini[1], Imagen.fin[0], Imagen.fin[1], Imagen.pos[0], Imagen.pos[1], Imagen.fin[0], Imagen.fin[1]);
c.restore();
},
fg11: function() {
Imagen.ini[0]= 2 +48*7;
Imagen.ini[1]= 0;
Imagen.pos[0]= -Imagen.auxy[0] -22;
Imagen.pos[1]= Imagen.auxy[1] -1;
c.save();
c.translate(0, 0);
c.scale(-1 ,1);
c.drawImage(Imagen.obj, Imagen.ini[0], Imagen.ini[1], Imagen.fin[0], Imagen.fin[1], Imagen.pos[0], Imagen.pos[1], Imagen.fin[0], Imagen.fin[1]);
c.restore();
},
fg12: function() {
Imagen.ini[0]= 2 +48*8;
Imagen.ini[1]= 1;
Imagen.pos[0]= -Imagen.auxy[0] -22;
Imagen.pos[1]= Imagen.auxy[1];
c.save();
c.translate(0, 0);
c.scale(-1 ,1);
c.drawImage(Imagen.obj, Imagen.ini[0], Imagen.ini[1], Imagen.fin[0], Imagen.fin[1], Imagen.pos[0], Imagen.pos[1], Imagen.fin[0], Imagen.fin[1]);
c.restore();
}
};
var Animar= { // a=65, d=68, w=87, s=83 // izq=37, arr=38, der=39, abj=40 this is for calling the sprites
S: 0,
W: 0,
A: 0,
D: 0,
tecla: 0, dir: 83,
abajo: function() {
if (this.S <= 1) Sombra.fg1();
else if (this.S <= 2) Sombra.fg2();
else if (this.S <= 3) Sombra.fg3();
else if (this.S <= 4) Sombra.fg2();
this.S+= Imagen.vel.som;
if (this.S > 4) this.S= 0;
},
arriba: function() {
if (this.W <= 1) Sombra.fg4();
else if (this.W <= 2) Sombra.fg5();
else if (this.W <= 3) Sombra.fg6();
else if (this.W <= 4) Sombra.fg5();
this.W+= Imagen.vel.som;
if (this.W > 4) this.W= 0;
},
izquierda: function() {
if (this.A <= 1) Sombra.fg7();
else if (this.A <= 2) Sombra.fg8();
else if (this.A <= 3) Sombra.fg9();
else if (this.A <= 4) Sombra.fg8();
this.A+= Imagen.vel.som;
if (this.A > 4) this.A= 0;
},
derecha: function() {
if (this.D <= 1) Sombra.fg10();
else if (this.D <= 2) Sombra.fg11();
else if (this.D <= 3) Sombra.fg12();
else if (this.D <= 4) Sombra.fg11();
this.D+= Imagen.vel.som;
if (this.D > 4) this.D= 0;
}
};
var foo= function() {
c.clearRect(0, 0, 600, 300);
if(Animar.dir == 83) Sombra.fg2();
if(Animar.dir == 87) Sombra.fg5();
if(Animar.dir == 65) Sombra.fg8();
if(Animar.dir == 68) Sombra.fg11();
if(Animar.tecla == 83) {Animar.abajo(); Imagen.auxy[1]+= Imagen.vel.des;}
if(Animar.tecla == 87) {Animar.arriba(); Imagen.auxy[1]+= -Imagen.vel.des}
if(Animar.tecla == 65) {Animar.izquierda(); Imagen.auxy[0]+= -Imagen.vel.des *1.5;}
if(Animar.tecla == 68) {Animar.derecha(); Imagen.auxy[0]+= Imagen.vel.des *1.5;}
requestAnimationFrame(foo);
};
var c= Lienzo.obj.getContext('2d');
Imagen.cargar();
foo();
onkeydown= function(e){Animar.tecla= e.keyCode; Animar.dir=0;};
onkeyup= function(){Animar.dir= Animar.tecla; Animar.tecla= 0;};<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body style="background:rgb(57,63,76);color:rgb(190,190,190);">
<canvas id="lienzo" width="600" height="300" style="background:olivedrab;"></canvas>
<script src="imagen.js">
</script>
</body>
</html>
<!--
Imagen
obj
ruta
cargar()
ini[]
fin[]
pos[]
Lienzo
obj
ancho
alto
Sombra
fg1, fg2, fg3 // abajo
fg4, fg5, fg6 // arriba
fg7, fg8, fg9 // izquierda
fg10,fg11,fg12// derecha
Movimiento
N
abajo()
-->
Upvotes: 0
Views: 90
Answers (1)
11thdimension
Reputation: 10633
It's not the issue with the only key 'D' but it's happening with all image drawings.
Issue is that canvas is trying to smooth your images during drawImage calls. It can be disabled by setting following property to false.
//Following needs to be set to false, as pointed out by Kaiido, prefixed versions are necessary currenlty
c.imageSmoothingEnabled = false;
c.mozImageSmoothingEnabled = false;
c.msImageSmoothingEnabled = false;
c.webkitImageSmoothingEnabled = false;
Here's the documentation link from mozilla
After disabling the smoothening images look alright. See the try the modified script below. I have code to disable the smoothening only.
var Imagen= { // image to load, and manipulate
obj: null,
ruta: null,
cargar: function() {
this.obj= new Image();
//this.obj.src= '/C:/Documents and Settings/casa/Mis documentos/Mis imágenes/sprite.png';
this.obj.src= 'https://s22.postimg.org/6r8uzrygh/sprite.png';
},
ini: [2, 1],
fin: [22, 38],
pos: [0, 1],
auxy: [0, 1],
vel: {
des: 0.4,
som: 0.1
}
};
var Lienzo= { // this is the canvas
obj: document.getElementById('lienzo'),
ancho: 600,
alto: 300
};
var Sombra= { // this is for the sprites
fg1: function() {
Imagen.ini[0]= 2 +48*0; // recortes de la imagen
Imagen.ini[1]= 1; // recortes de la imagen
Imagen.pos[0]= Imagen.auxy[0];
Imagen.pos[1]= Imagen.auxy[1];
c.drawImage(Imagen.obj, Imagen.ini[0], Imagen.ini[1], Imagen.fin[0], Imagen.fin[1], Imagen.pos[0], Imagen.pos[1], Imagen.fin[0], Imagen.fin[1]);
},
fg2: function() {
Imagen.ini[0]= 2 +48*1;
Imagen.ini[1]= 0;
Imagen.pos[0]= Imagen.auxy[0];
Imagen.pos[1]= Imagen.auxy[1] -1;
c.drawImage(Imagen.obj, Imagen.ini[0], Imagen.ini[1], Imagen.fin[0], Imagen.fin[1], Imagen.pos[0], Imagen.pos[1], Imagen.fin[0], Imagen.fin[1]);
},
fg3: function() {
Imagen.ini[0]= 2 +48*2;
Imagen.ini[1]= 1;
Imagen.pos[0]= Imagen.auxy[0];
Imagen.pos[1]= Imagen.auxy[1];
c.drawImage(Imagen.obj, Imagen.ini[0], Imagen.ini[1], Imagen.fin[0], Imagen.fin[1], Imagen.pos[0], Imagen.pos[1], Imagen.fin[0], Imagen.fin[1]);
},
fg4: function() {
Imagen.ini[0]= 2 +48*3;
Imagen.ini[1]= 1;
Imagen.pos[0]= Imagen.auxy[0];
Imagen.pos[1]= Imagen.auxy[1];
c.drawImage(Imagen.obj, Imagen.ini[0], Imagen.ini[1], Imagen.fin[0], Imagen.fin[1], Imagen.pos[0], Imagen.pos[1], Imagen.fin[0], Imagen.fin[1]);
},
fg5: function() {
Imagen.ini[0]= 2 +48*4;
Imagen.ini[1]= 0;
Imagen.pos[0]= Imagen.auxy[0];
Imagen.pos[1]= Imagen.auxy[1] -1;
c.drawImage(Imagen.obj, Imagen.ini[0], Imagen.ini[1], Imagen.fin[0], Imagen.fin[1], Imagen.pos[0], Imagen.pos[1], Imagen.fin[0], Imagen.fin[1]);
},
fg6: function() {
Imagen.ini[0]= 2 +48*5;
Imagen.ini[1]= 1;
Imagen.pos[0]= Imagen.auxy[0];
Imagen.pos[1]= Imagen.auxy[1];
c.drawImage(Imagen.obj, Imagen.ini[0], Imagen.ini[1], Imagen.fin[0], Imagen.fin[1], Imagen.pos[0], Imagen.pos[1], Imagen.fin[0], Imagen.fin[1]);
},
fg7: function() {
Imagen.ini[0]= 2 +48*6;
Imagen.ini[1]= 1;
Imagen.pos[0]= Imagen.auxy[0];
Imagen.pos[1]= Imagen.auxy[1];
c.drawImage(Imagen.obj, Imagen.ini[0], Imagen.ini[1], Imagen.fin[0], Imagen.fin[1], Imagen.pos[0], Imagen.pos[1], Imagen.fin[0], Imagen.fin[1]);
},
fg8: function() {
Imagen.ini[0]= 2 +48*7;
Imagen.ini[1]= 0;
Imagen.pos[0]= Imagen.auxy[0];
Imagen.pos[1]= Imagen.auxy[1] -1;
c.drawImage(Imagen.obj, Imagen.ini[0], Imagen.ini[1], Imagen.fin[0], Imagen.fin[1], Imagen.pos[0], Imagen.pos[1], Imagen.fin[0], Imagen.fin[1]);
},
fg9: function() {
Imagen.ini[0]= 2 +48*8;
Imagen.ini[1]= 1;
Imagen.pos[0]= Imagen.auxy[0];
Imagen.pos[1]= Imagen.auxy[1];
c.drawImage(Imagen.obj, Imagen.ini[0], Imagen.ini[1], Imagen.fin[0], Imagen.fin[1], Imagen.pos[0], Imagen.pos[1], Imagen.fin[0], Imagen.fin[1]);
},
fg10: function() {
Imagen.ini[0]= 2 +48*6;
Imagen.ini[1]= 1;
Imagen.pos[0]= -Imagen.auxy[0] -22;
Imagen.pos[1]= Imagen.auxy[1];
c.save();
c.translate(0, 0);
c.scale(-1 ,1);
c.drawImage(Imagen.obj, Imagen.ini[0], Imagen.ini[1], Imagen.fin[0], Imagen.fin[1], Imagen.pos[0], Imagen.pos[1], Imagen.fin[0], Imagen.fin[1]);
c.restore();
},
fg11: function() {
Imagen.ini[0]= 2 +48*7;
Imagen.ini[1]= 0;
Imagen.pos[0]= -Imagen.auxy[0] -22;
Imagen.pos[1]= Imagen.auxy[1] -1;
c.save();
c.translate(0, 0);
c.scale(-1 ,1);
c.drawImage(Imagen.obj, Imagen.ini[0], Imagen.ini[1], Imagen.fin[0], Imagen.fin[1], Imagen.pos[0], Imagen.pos[1], Imagen.fin[0], Imagen.fin[1]);
c.restore();
},
fg12: function() {
Imagen.ini[0]= 2 +48*8;
Imagen.ini[1]= 1;
Imagen.pos[0]= -Imagen.auxy[0] -22;
Imagen.pos[1]= Imagen.auxy[1];
c.save();
c.translate(0, 0);
c.scale(-1 ,1);
c.drawImage(Imagen.obj, Imagen.ini[0], Imagen.ini[1], Imagen.fin[0], Imagen.fin[1], Imagen.pos[0], Imagen.pos[1], Imagen.fin[0], Imagen.fin[1]);
c.restore();
}
};
var Animar= { // a=65, d=68, w=87, s=83 // izq=37, arr=38, der=39, abj=40 this is for calling the sprites
S: 0,
W: 0,
A: 0,
D: 0,
tecla: 0, dir: 83,
abajo: function() {
if (this.S <= 1) Sombra.fg1();
else if (this.S <= 2) Sombra.fg2();
else if (this.S <= 3) Sombra.fg3();
else if (this.S <= 4) Sombra.fg2();
this.S+= Imagen.vel.som;
if (this.S > 4) this.S= 0;
},
arriba: function() {
if (this.W <= 1) Sombra.fg4();
else if (this.W <= 2) Sombra.fg5();
else if (this.W <= 3) Sombra.fg6();
else if (this.W <= 4) Sombra.fg5();
this.W+= Imagen.vel.som;
if (this.W > 4) this.W= 0;
},
izquierda: function() {
if (this.A <= 1) Sombra.fg7();
else if (this.A <= 2) Sombra.fg8();
else if (this.A <= 3) Sombra.fg9();
else if (this.A <= 4) Sombra.fg8();
this.A+= Imagen.vel.som;
if (this.A > 4) this.A= 0;
},
derecha: function() {
if (this.D <= 1) Sombra.fg10();
else if (this.D <= 2) Sombra.fg11();
else if (this.D <= 3) Sombra.fg12();
else if (this.D <= 4) Sombra.fg11();
this.D+= Imagen.vel.som;
if (this.D > 4) this.D= 0;
}
};
var foo= function() {
c.clearRect(0, 0, 600, 300);
if(Animar.dir == 83) Sombra.fg2();
if(Animar.dir == 87) Sombra.fg5();
if(Animar.dir == 65) Sombra.fg8();
if(Animar.dir == 68) Sombra.fg11();
if(Animar.tecla == 83) {Animar.abajo(); Imagen.auxy[1]+= Imagen.vel.des;}
if(Animar.tecla == 87) {Animar.arriba(); Imagen.auxy[1]+= -Imagen.vel.des}
if(Animar.tecla == 65) {Animar.izquierda(); Imagen.auxy[0]+= -Imagen.vel.des *1.5;}
if(Animar.tecla == 68) {Animar.derecha(); Imagen.auxy[0]+= Imagen.vel.des *1.5;}
requestAnimationFrame(foo);
};
var c= Lienzo.obj.getContext('2d');
//Following needs to be set to false, as pointed out by Kaiido, prefixed versions are necessary currenlty
c.imageSmoothingEnabled = false;
c.mozImageSmoothingEnabled = false;
c.msImageSmoothingEnabled = false;
c.webkitImageSmoothingEnabled = false;
Imagen.cargar();
foo();
onkeydown= function(e){Animar.tecla= e.keyCode; Animar.dir=0;};
onkeyup= function(){Animar.dir= Animar.tecla; Animar.tecla= 0;};<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body style="background:rgb(57,63,76);color:rgb(190,190,190);">
<canvas id="lienzo" width="600" height="300" style="background:olivedrab;"></canvas>
<script src="imagen.js">
</script>
</body>
</html>
<!--
Imagen
obj
ruta
cargar()
ini[]
fin[]
pos[]
Lienzo
obj
ancho
alto
Sombra
fg1, fg2, fg3 // abajo
fg4, fg5, fg6 // arriba
fg7, fg8, fg9 // izquierda
fg10,fg11,fg12// derecha
Movimiento
N
abajo()
-->Upvotes: 1
Related Questions
- HTML5 - Canvas, drawImage() draws image blurry
- javascript loaded image is blurry (PNG)
- HTML Canvas: Why Is my image on the canvas so blurry?
- Blurry image with <canvas>
- Image in canvas got wrong size, ratio and got blur
- Canvas Text and image blurry
- Canvas element with blurred lines
- html5 canvas. blurry lines
- HTML canvas making blurry shapes
- Canvas image quality issue