Шкала прямоугольная angular холст в горизонтальном направлении

Question

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

 componentDidMount() {
        this.drawCanvas();
    }

drawCanvas(){
    let canvas = document.getElementById("timeline-canvas")
    let ctx = canvas.getContext("2d")
    ctx.fillStyle = 'white'
    ctx.fillRect(0,0,200, 100)
}

 changeValue(){
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 = 'white'
ctx.strokeRect(0,0,200, 100);
ctx.fillRect(0,0,200, 100);
ctx.scale(value, 1);
ctx.fillStyle = 'white'
ctx.strokeRect(0,0,200, 100);
ctx.fillRect(0,0,200, 100);



}

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>
                <canvas id="timeline-canvas" height={100} width={200}>

                </canvas>
            </header>
        </div>
    )
}