input的value值改变后，图片不在画布中心放大，怎么解决？

<script type="text/javascript">
            var canvas = document.getElementById("canvas");
            var context = canvas.getContext("2d");
            var slider = document.getElementById("scale-range");
            canvas.width = 800;
            canvas.height = 543;
            var scale = slider.value;
            var image = new Image();
            image.src = "../img/121.jpg";
            image.onload = function() {
                drawImageByScale(scale);
            }

            function drawImageByScale(scale) {
                var imageWidth = canvas.width * scale;
                var imageHeight = canvas.height * scale;
                var sx = imageWidth / 2 - canvas.width / 2;
                var sy = imageHeight / 2 - canvas.height / 2;
                context.drawImage( image , sx , sy , canvas.width , canvas.height , 0 , 0 , canvas.width , canvas.height );
            }
        </script>