Установите html диапазон ввода, используя javascript / jQuery

Question

Я беру пользовательское изображение и рисую его на холсте, а затем накладываю поверх него какой-то текст. Для определения положения текста я использую тег html input типа range. Я начинаю с изображения по умолчанию и использую фиксированные значения при инициализации. Однако, когда пользователь загружает новое изображение, я хотел бы установить значение для диапазона и максимальное значение для входного диапазона на основе своего загруженного изображения, которое, вероятно, будет иметь разные размеры.

К сожалению, я могу не понять, как получить доступ / изменить эти два значения. Я пробовал такие вещи, как: document.getElementById('text_top_offset').value = finalHeight*0.9;

$('#text_top_offset).attr('value', finalHeight*0.9);

в области файла JS, где я указал с комментарием. И это БУДЕТ установить значение, но затем убивает моего слушателя событий, который позволяет пользователю устанавливать диапазон, потому что я устанавливаю его в функции, которую вызывает этот слушатель событий.

Я также попытался поместить его в функции, а затем вызывать эту функцию после drawCanvas, но это, похоже, не имеет никакого эффекта. Я прочитал много учебников, таких как этот , но безрезультатно.

Вот соответствующий html раздела ввода:

<!-- Top Offset -->
    <div class="form-group">
        <div class="row">
            <label class="control-label col-md-3" for="text_top_offset">Offset from top:</label>
            <div class="col-md-7">
                <input style="width:100%" id="text_top_offset" type="range" min="0" max="500" value="50"/>
            </div>
            <div class="col-md-2 setting-value">
                <span id="text_top_offset__val">50</span>px
            </div>
        </div>
    </div>

Вот мой (сильно вычищенный) файл Javascript. Я пытался оставить только соответствующие разделы.

$(document).ready(function(){

    var canvas = document.getElementById('myCanvas');
    ctx = canvas.getContext('2d');

    var MaxWidth = 800;
    var MaxHeight = 800;
    var finalWidth;
    var finalHeight;

  //logic to set new canvas dimensions for new file...
    function getDimensions(img){
                //lots of if else statements - they work
                return [finalWidth, finalHeight];
            }



    // core drawing function
    var drawCanvas = function() {
        var img = document.getElementById('start-image');
        dims = getDimensions(img);
        finalWidth = dims[0];
        finalHeight = dims[1];
        var fontSize = parseInt( $('#text_font_size').val() );

    // set form field properties
        $('#text_top_offset').attr('max', finalHeight);

        // initialize canvas element with desired dimensions
        canvas.width = finalWidth;
        canvas.height = finalHeight;

        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight, 0, 0,finalWidth, finalHeight);

        ctx.lineWidth  = parseInt( $('#text_stroke_width').val() );
        ctx.font = fontSize + 'pt sans-serif';
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'white';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'top';

        var text1 = $('#text_top').val();
        text1 = text1.toUpperCase();
        x = finalWidth / 2;

        //THIS IS WHERE I HAVE TRIED MY CHANGES

        //This gets the value from the input range...
        topTextY = parseInt( $('#text_top_offset').val() );

        var lineHeight = fontSize + parseInt( $('#text_line_height').val() );
        var maxTextAreaWidth = finalWidth * 0.85;

        wrapText(ctx, text1, x, topTextY, maxTextAreaWidth, lineHeight, false);
    };
 //end of drawCanvas function


    // build inner container for wrapping text inside
    var wrapText = function(context, text, x, y, maxWidth, lineHeight, fromBottom) {
        var pushMethod = (fromBottom) ? 'unshift' : 'push';

        lineHeight = (fromBottom) ? -lineHeight : lineHeight;

        var lines = [];
        var y = y;
        var line = '';
        var words = text.split(' ');

        for (var n = 0; n < words.length; n++) {
            var testLine = line + ' ' + words[n];
            var metrics = context.measureText(testLine);
            var testWidth = metrics.width;

            if (testWidth > maxWidth) {
                lines[pushMethod](line);
                line = words[n] + ' ';
            } else {
                line = testLine;
            }
        }
        lines[pushMethod](line);

        for (var k in lines) {
            context.strokeText(lines[k], x, y + lineHeight * k);
            context.fillText(lines[k], x, y + lineHeight * k);
        }
    };
 //end of wrapText function


    // read selected input image from upload field and display it in browser
    $("#imgInp").change(function(){
        var input = this;

        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('#start-image').attr('src', e.target.result);
            }

            reader.readAsDataURL(input.files[0]);
        }

        window.setTimeout(function(){
            drawCanvas();
            $('#image_credit').hide();
        }, 500);
    });



    // relevant event listeners

    $(document).on('input change', '#text_top_offset', function() {
        $('#text_top_offset__val').text( $(this).val() );
        drawCanvas();
    });

    // init at startup
    window.setTimeout(function(){
        drawMeme();
    }, 100);

});