Добавление целых чисел в массив на javascript

Question

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

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

Любая помощь будет приветствоваться. это код

function corta() { 
    var c = document.getElementById("myCanvas"); 
    var ctx = c.getContext("2d"); 
    var medida1 = document.getElementById('medida2').value; 
    var medida2 = document.getElementById('medida1').value; 
    var corte1 = Math.round(medida1); 
    var corte2 = Math.round(medida2); 
    var arrayAncho = []; 
    var arrayLargo = []; 
    var ancho = 0; 
    var largo = 0; 
    arrayLargo.push(medida2); 
    arrayAncho.push(medida1); 
    //ancho, largo 

    document.getElementById('medida2').onclick = function() { this.value = ''; }; 
    document.getElementById('medida1').onclick = function() { this.value = ''; }; 

    //metodo para el ancho 

    for (var i = 0; i < arrayAncho.length ; i++) { 
     ancho += arrayAncho[i]; 
    } 

    if (arrayAncho.length == 1) { 
     ctx.fillStyle = "#58FA58"; 
     ctx.fillRect(0, largo, corte1, corte2); 
    } else 
    if (medida1 > 122 - ancho) { 
     ctx.fillStyle = "#58FA58"; 
     ctx.fillRect(ancho, largo, corte1, corte2);//ancho, largo 
    } 

    medida1 = 0; 
    medida2 = 0; 
} 

Answer 1

Каждый раз, когда вы запускаете функцию запуск

var arrayAncho = []; 
var arrayLargo = []; 

Это делает их пустыми каждый раз. Вы должны объявить их вне функции и только ссылаться на них внутри кодового блока