HTML5 canvas artifacts - vue.js

Question

I have created a Vue component that loads an image into a canvas and allows the user to zoom-in and zoom-out with the mouse wheel. The image resolution is 1260x1800, the canvas resolution is 427x610 (the aspect ratio is preserved).
<template>
<canvas
ref="canvas"
:width="width"
:height="height"
#mousedown.prevent.stop="onMouseDown"
#mousemove.prevent.stop="onMouseMove"
#mouseup.prevent.stop="onMouseUp"
#mouseout.prevent.stop="onMouseOut"
#mousewheel.prevent.stop="onMouseWheel"
/>
</template>
<script>
export default {
name: 'MyZoomingCanvas',
props: {
src: {
type: String,
required: true
},
zoom: {
type: Object,
required: true,
validator: zoom =>
zoom &&
zoom.hasOwnProperty('min') &&
zoom.hasOwnProperty('max') &&
zoom.hasOwnProperty('step') &&
zoom.hasOwnProperty('scale')
}
},
data() {
return {
img: null,
isMouseDown: false,
startX: null,
startY: null,
dx: 0,
dy: 0,
width: 427,
height: 610
}
},
watch: {
'zoom.scale'() {
this.draw()
}
},
methods: {
draw() {
const canvas = this.$refs.canvas
const ctx = canvas.getContext('2d')
ctx.clearRect(0, 0, this.width, this.height)
ctx.setTransform(
this.zoom.scale,
0,
0,
this.zoom.scale,
((1 - this.zoom.scale) * this.width) / 2,
((1 - this.zoom.scale) * this.height) / 2
)
ctx.drawImage(this.img, 0, 0, this.width, this.height)
},
loadImage(src) {
return new Promise((resolve, reject) => {
const img = new Image()
img.addEventListener('load', () => resolve(img))
img.addEventListener('error', err => reject(err))
img.src = src
})
},
onMouseDown({ clientX, clientY }) {
this.startX = clientX
this.startY = clientY
this.isMouseDown = true
},
onMouseMove({ clientX, clientY }) {
if (this.isMouseDown) {
this.dx += clientX - this.startX
this.dy += clientY - this.startY
this.draw()
this.startX = clientX
this.startY = clientY
}
},
onMouseUp() {
this.isMouseDown = false
this.dx = 0
this.dy = 0
},
onMouseOut() {
this.isMouseDown = false
},
onMouseWheel({ offsetX, offsetY, deltaY }) {
this.dx = -offsetX
this.dy = -offsetY
this.$emit(
'scale-change',
Math.min(this.zoom.max, Math.max(this.zoom.min, this.zoom.scale - deltaY * this.zoom.step))
)
}
},
mounted() {
this.loadImage(this.src).then(img => {
this.img = img
this.$nextTick(() => {
this.draw()
})
})
}
}
</script>
I noticed that in some cases the images are affected by strange artifacts, take a look at this example: https://jsfiddle.net/lmartini/b3hLr5ej/latest/
In the example, while zooming-in, I can clearly see a bunch of horizontal bands along the whole fabric height that disappear after a certain zoom level.
By googling I believe that these artifacts are caused by the resolution mismatch between the canvas and the image (the so called pixel-perfect problem) and, hence, by the internal browser downsampling algorithm.
I tried to improve the image smoothing quality of the canvas by adding the following lines but they didn't make any difference at all (my target browser is Chrome):
// ctx is the canvas context
ctx.imageSmoothingEnabled = true
ctx.imageSmoothingQuality = 'high'
How can I get rid of these artifacts?