Горизонтальная прокрутка на холсте прямоугольника при применении шкалы

Question

Цель: На холсте рисуется прямоугольник полной ширины высотой 100 пикселей. Существует ползунок (в диапазоне от 1 до 100), который используется для масштабирования ширины прямоугольника (изображение прилагается ниже). Когда ползунок находится в положении 0, прямоугольная шкала равна 1. Масштаб линейно увеличивается (от 1 до 2) по мере увеличения значения ползунка по мере увеличения значения ползунка. Цель состоит в том, чтобы сделать прямоугольник с горизонтальной прокруткой, когда масштаб больше 1 (потому что в идеале прямоугольник должен переполняться, если масштаб больше 1).

Текущая кодовая база:

componentDidMount() {
        this.drawCanvas();
    }

    drawCanvas(){


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

        ctx.fillStyle = 'red'
        ctx.strokeRect(0,0, canvas.width, 100)
        ctx.fillRect(0,0,canvas.width, 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')

        //map the value of slider to the scale. In this case slider value 1 represents
        //scale 1. And slider value 100 represents scale 2
        let scale = ((value/99) + (98/99))

        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.fillStyle = 'red'
        ctx.scale(scale, 1);

        //to equally scale it on left and right, x coordinate is given as below
        ctx.strokeRect(-((scale-1)/2)*canvas.width,0,canvas.width, 100)
        ctx.fillRect(-((scale-1)/2)*canvas.width,0,canvas.width, 100);

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


    render() {
        return (
            <div className="App">
                <header className="App-header">
                    <div className="slidecontainer">
                        <input type="range" min="1" max="100" className="slider" id="myRange" onChange={this.changeValue.bind(this)}/>
                    </div>
                    <div className='canvas-container'>
                        <canvas id="timeline-canvas" style={{width:100+"%"}}/>
                    </div>

                </header>
            </div>
        )
    }

Проблема: Прямоугольник не имеет горизонтальной прокрутки.