Изображение мерцает во время масштабирования холста

Question

Я пытаюсь изменить положение двух изображений, нарисованных на холсте, пока холст масштабируется. У меня есть слайдер для изменения масштаба холста. Изображения перемещаются правильно, когда я масштабирую холст. Но они мерцают. Вот мой код

const imgs = [{
    src:'./canvas-img1.jpg',
    pos: 20
}, {
    src: './canvas-img2.jpeg',
    pos: 25
}]


  drawCanvas(){


        let canvas = document.getElementById("timeline-canvas")
        let canvas_container = document.getElementById("canvas-container")
        let ctx = canvas.getContext("2d")


        imgs.map((item, i)=>{
            let img1 = new Image()
            img1.src = item.src
            let x = (item.pos * window.innerWidth)/100
            img1.onload = function (e)
            {
                ctx.drawImage(img1, x,0, 100, 100);
            }
        })
        ctx.save()
    }


 changeValue(){
        //get the value of slider
        let value = document.getElementById('myRange').value
        //console.log(value)

        let canvas = document.getElementById('timeline-canvas')
        let ctx =  canvas.getContext('2d')

        ctx.clearRect(0, 0, canvas.width, canvas.height);


        ctx.fillStyle = 'red'
        ctx.scale(value, 1);


        imgs.map((item, i)=>{
            let img1 = new Image()
            img1.src = item.src
            let x = (item.pos * window.innerWidth)/100
            img1.onload = function (e)
            {
                ctx.drawImage(img1, x,0, 100/scale, 100);
            }
        })

        ctx.restore()
        ctx.save();
    }