HTML5 Canvas Image Move pixelization

Question

I am trying to create an online image editor using HTML5 and getting issue while perform image move. pixelization happens everytime when I try to move, zoom, drag, rotate. I think issue is clearRect function.

function clear() {
    element.clearRect(0, 0, window.innerWidth, window.innerWidth);
}

Here is my Fiddle Project

Answer 1

You are playing with the matrix transformations of the canvas' context.
These also apply to the clearRect method.

You need either to calculate the current transformations and apply their negative value to the clearRect method, or to reset the transformation matrix.

One easy way to do so is by using the setTransform method and the default values for the transformation matrix : ctx.setTransform(1,0,0,1,0,0);

Updated fiddle , with a quick fix.

Answer 2

very interesting topic. Nice exercise, too. I picked your fiddle.

Here is the result:

https://jsfiddle.net/dh6y18yh/8/

var loopRunner = function() {
      drawImage();
        globalID = requestAnimationFrame(loopRunner);
};

Basically the main big difference is, that I decoupled ALL the parameters for the image positioning into variables. Then do the translate(x,y) in drawImage() and let drawImage() be run in a window.requestAnimationFrame() loop.

This way in is rendered correctly at 60 fps.

The mouse dragging is now calculating the distance dragged, and set this value to the position values.