html5 javascript холст не может нарисовать новый элемент без обновления страницы - PullRequest
Новая
       18

html5 javascript холст не может нарисовать новый элемент без обновления страницы

0 голосов
/ 27 мая 2020

Я пытаюсь научиться рисовать на холсте html5.

У меня есть html текстовое поле, где я могу ввести цвет (например, черный, красный, ...), а затем кнопку щелчок, запускающий команду для создания fillRect на холсте.

Я обнаружил, что первая команда работает, а вторая ничего не делает.

ie. ввод | вывод красный изменяет холст на красный черный / ничего не меняется /

некоторые выбранные биты кода: html файл 

<body>
<div class="row">
    <div class="column">
        <h1>Code Here</h1>
        <div class="code">
            <textarea id="paintcode" spellcheck="false" placeholder="Type your code here (will disappear after input)"></textarea>
        </div>
        <button id="submitbutton">Paint!</button>
    </div>
    <div class="column">
        <h1>Your Painting Here (700x700 px)</h1>
        <canvas id="canvas" width="700" height="700"></canvas>
        <!-- canvas stuff goes here -->



        <!-- canvas stuff ends here -->
    </div>
</div>

<script src="scripts/main.js" type="module"></script>
</body>

основной. js

const mainCanvas = document.getElementById('canvas');
const mainContext = mainCanvas.getContext('2d');
SUBMIT_BUTTON.addEventListener("click", main);
function main() {
  mainContext.clearRect(0,0,canvas_width,canvas_height);
  let input_code = PAINT_CODE.value;
  mainContext.fillStyle = input_code;
  mainContext.fillRect(0,0,canvas_width,canvas_height);
}

весь проект усложняется более сложным синтаксическим анализом (с дополнительной функцией), но я думаю, это то, к чему сводится моя проблема. Он срабатывает при первом щелчке, но при втором щелчке цвет не меняется. Я знаю, что ввод все еще обрабатывается и анализируется правильно, но я не знаю, почему он не рисует второй раз после того, как я изменил ввод текстового поля. Мне нужно обновить sh страницу, чтобы перерисовать ее.

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

Спасибо за вашу помощь!

...