Приветствую. Не могу сработать с событиями через т.н. "булевый флаг". По моей задумке, при клике на картинку, должен заливаться канвас, но ничего не происходит(( Прошу помочь.
п.с. другие способы заливки меня не устраивают, нужно иметь понять, как эти "флаги" работают. Тут легкий пример и флаг не нужен толком, но в моем проекте без флага никак. Так что покажите плиз на этом примере. Спасибо.
<!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)
}