CODEWITHSUNDEEP
javascripthtmlcanvashtml5-canvas
Дмитрий Захаров
Дмитрий Захаров

Reputation: 83

Blurred square on canvas. What to do?

Why blurred square on canvas? If you look closely you will see that the image is fuzzy and blurred. Why is this happening and how can I fix it? jsfiddle

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var mx=0,my=0;
var rect = {
x: 0,
y: 0,
w: 30,
h: 30,
s: 5
}
rect.update = function(x,y){
this.targetX = x;
this.targetY = y;
var tx = this.targetX - this.x;
var ty = this.targetY - this.y;
var dist = Math.sqrt(tx*tx+ty*ty);
this.velX = (tx/dist)*this.s;
this.velY = (ty/dist)*this.s;
if(dist>this.w/2){
this.x += this.velX;
this.y += this.velY;
}
}
canvas.addEventListener('click',function(e){
mx = e.clientX;
my = e.clientY;
});
function paint(){
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.fillRect(rect.x,rect.y,rect.w,rect.h);
ctx.fillStyle = 'red';
rect.update(mx,my);
window.requestAnimationFrame(paint);
};
paint();

Upvotes: 0

Views: 160

Answers (2)

NullPointer
NullPointer

Reputation: 159

You should keep your objects coords as integers as @markE says, and you could also try to set imageSmoothing to false: disable image smoothing

Hope it helps.

Upvotes: 1

markE
markE

Reputation: 105025

Make sure your x,y are integers:

this.x = parseInt(this.x+this.velX);
this.y = parseInt(this.y+this.velY);

Upvotes: 2

Related Questions