Javascript-форум - Не работают события через "флаги" в канвас. Помогите, плиз)

Javascript-форум (https://javascript.ru/forum/)

- Events/DOM/Window (https://javascript.ru/forum/events/)

- - Не работают события через "флаги" в канвас. Помогите, плиз) (https://javascript.ru/forum/events/78331-ne-rabotayut-sobytiya-cherez-flagi-v-kanvas-pomogite-pliz.html)

Не работают события через "флаги" в канвас. Помогите, плиз)

Приветствую. Не могу сработать с событиями через т.н. "булевый флаг". По моей задумке, при клике на картинку, должен заливаться канвас, но ничего не происходит(( Прошу помочь.
п.с. другие способы заливки меня не устраивают, нужно иметь понять, как эти "флаги" работают. Тут легкий пример и флаг не нужен толком, но в моем проекте без флага никак. Так что покажите плиз на этом примере. Спасибо.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<img id="photo" src="maxresdefault.jpg"></img>
<canvas id="canvas"></canvas>
</body>
<script src="script.js"></script>
</html>

var canvasBody = document.getElementById("canvas")
var canvas = canvasBody.getContext("2d")

w = canvasBody.width = window.innerWidth
h = canvasBody.height = window.innerHeight

var image = document.getElementById("photo")
var clicked = false

canvas.fillStyle="red"
canvas.strokeStyle="red"
canvas.strokeRect(0,0,100,100)

image.onclick = function(){
clicked = true
}

if(clicked){
    canvas.fillRect(0,0,100,100)
}

При клике срабатывает функция которая указана, но как мы видим в указанной функции нет инструкции заливки.

Цитата:

Сообщение от Rise (Сообщение 512272)

При клике срабатывает функция которая указана, но как мы видим в указанной функции нет инструкции заливки.

Так в этом и задумка: в функции есть изменение флага с "фолс" на "тру". И инструкция в условии, "если флаг на тру, то заливай". Как изменить код, чтобы, при изменении флага с "фолс" на "тру" происходила заливка?

Условие выполняется раньше клика, а после уже только функция клика может что-то менять.

var clicked = false;
image.onclick = function () {
    if (!clicked) {
        clicked = true;
        canvas.fillRect(0, 0, 100, 100);
    }
};
image.onclick = function () {
    if (clicked) return;
    clicked = true;
    canvas.fillRect(0, 0, 100, 100);
};

Цитата:

Сообщение от Rise (Сообщение 512275)

Условие выполняется раньше клика, а после уже только функция клика может что-то менять.

var clicked = false;
image.onclick = function () {
    if (!clicked) {
        clicked = true;
        canvas.fillRect(0, 0, 100, 100);
    }
};
image.onclick = function () {
    if (clicked) return;
    clicked = true;
    canvas.fillRect(0, 0, 100, 100);
};

Изучу. Спасибо.