Исчезать пиксельное (размытое) изображение до нормального состояния после наведения мыши с помощью jQuery

Из вашего вопроса немного неясно, чего вы пытаетесь достичь, но, предполагая, что вы имеете в виду, как ухаживать/рисовать на одном изображении в другом, можно просто использовать следующие шаги:

• В качестве фонового изображения на холст установите целевое изображение (обычно в этом случае).
• Нарисуйте размытую версию на холсте - это будет охватывать изображение цели
• Измените композитный режим на destination-out который удалит то, что вы рисуете.

Разумеется, вам придется реализовать логику для мыши и рисования.

Вот, например, с живой демонстрацией здесь.

Начальный код может быть:

var ctx = $('#demo')[0].getContext('2d'), /// get context
    img = new Image,                      /// load a new image
    isDown = false,                       /// for mouse button
    radius = 15;                          /// eraser radius

/// setup logic

$(img).on('load', function() {            /// onload for image

    /// when image has been loaded, attach event listeners for mouse
    $('#demo').on('mousedown', function(e) {
        isDown = true;
        erase(getXY(e));
    })
    .on('mousemove', function(e) {
        if (isDown) erase(getXY(e));
    })
    .on('mouseup', function(e) {
        isDown = false;
    });

    /// draw blurred image        
    ctx.drawImage(img, 0, 0);

    /// change composite mode so we can erase
    ctx.globalCompositeOperation = 'destination-out';
});
img.src = 'http://i.imgur.com/mi3zfEX.jpg'; /// blurred image

Фон назначения (обычный) для холста определяется с помощью CSS:

#demo {
    background:url(http://i.imgur.com/v85BQ8k.jpg) no-repeat left top;
    cursor:crosshair;
}

Тогда нам нужно всего лишь нарисовать что-то в позиции мыши, чтобы убрать накладку и открыть фон:

function erase(pos) {
    ctx.beginPath();                               /// start new path
    ctx.arc(pos.x, pos.y, radius, 0, 2 * Math.PI); /// draw a circle
    ctx.closePath();                               /// close path
    ctx.fill();                                    /// fill it
}

Мы можем заполнить его любым цветом - это не имеет значения, потому что он будет стираться в области, где он нарисован в любом случае, когда мы используем режим destination-out для композитного режима.

Единственное, что нам нужно сделать, это настроить положение мыши так, чтобы мы рисовали относительно холста - эта функция возвращает объект с x и y свойствами:

function getXY(e) {
    var r = $('#demo')[0].getBoundingClientRect();
    return {x: e.clientX - r.left, y: e.clientY - r.top};
}