[JS]hover시 canvas pixelate

See the Pen canvas hover pixelate by Oh Ikmyeong (@dpffpself) on CodePen.

JS

const canvas = document.getElementById("canvas")
const ctx = canvas.getContext("2d")
 
const img = new Image()
img.src = "https://images.unsplash.com/photo-1772528205616-e65dc0994c7b?q=80&w=880&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
 
let pixelSize = 1
let targetPixelSize = 1
 
img.onload = () => {
    draw()
}
 
canvas.addEventListener("mouseenter", () => {
    targetPixelSize = 100
})
 
canvas.addEventListener("mouseleave", () => {
    targetPixelSize = 1
})
 
function draw() {
 
    // 부드럽게 애니메이션
    pixelSize += (targetPixelSize - pixelSize) * 0.1
 
    const w = canvas.width
    const h = canvas.height
 
    const size = Math.max(1, Math.floor(pixelSize))
 
    const scaledW = Math.ceil(w / size)
    const scaledH = Math.ceil(h / size)
 
    ctx.imageSmoothingEnabled = false
 
    // 작은 크기로 그림
    ctx.drawImage(img, 0, 0, scaledW, scaledH)
 
    // 다시 크게 확대
    ctx.drawImage(
        canvas,
        0, 0, scaledW, scaledH,
        0, 0, w, h
    )
 
    requestAnimationFrame(draw)
}