Помогите понять Canvas

[MC-XOBAHCK]

Rise, картинок нет - у меня канвас перед кнопкой скачать, из него нужно сделать картинку (в смысле скачать его как картинку).

j0hnik, в фоксе тоже. При этом контекстным меню браузера скачивается как надо.

Я вот начал console.log расставлять и сразу заметил одну странность.
Ставлю так:

let canvas = document.querySelector('.editor canvas');
console.log(canvas);

в консоле пусто. (??)

Делаю так:

let canvas = event.target.parentNode.parentNode.querySelector('canvas');
console.log(canvas);

В консоль выводит: <canvas width="1081" height="700">

Смотрю HTML в вкладке Elements, там <canvas width="1081" height="700"> (без закрывающего тега), вместо изначального: <canvas></canvas>

Размеры канваса у меня задаются через функцию и зависят от размера окна:

function risunokRoof() {
    let widthWindow = document.documentElement.clientWidth;   //Ширина окна браузера
    
    const canvasRoof = document.querySelector('canvas');
    let ctx = canvasRoof.getContext('2d');
        
    canvasRoof.width = widthWindow - 285;
    canvasRoof.height = 700;

Высоту к размерам окна не привязывал, она даёт NULL. Наверно из за того что у body прописан overflow-y: hidden;, а у родительского для канваса divа заданы стили:

.editor {
    position: fixed;
    margin-left: 280px;
    height: 100vh;
    width: calc(100% - 300px);
}

Может быть причина из за того что после выполнения скрипта у канваса нет закрывающего тега?

[Alexandroppolus]

MC-XOBAHCK,
http://jsfiddle.net/ начертай здесь полный пример, в котором не работает
пока только куски кода, а кто знает, что скрыто между ними )

[Dilettante_Pro]

в консоле пусто. (??)

- ????

<div class="editor">
    <canvas></canvas>
    <a href="" download="my-file-name.png" href="#">
        <button id="download">Скачать</button>
    </a>
</div>
<script>
let canvas = document.querySelector('.editor canvas');
console.log(canvas);
alert(canvas.tagName);
</script>

[MC-XOBAHCK]

Все кто писал или просто читал пытаясь вникнуть в мою проблему, вы извините меня пожалуйста, что отнял ваше время.
j0hnik сразу показал рабочий вариант. Это я криворукий говнокодер.
Добавил id к тегу <a> - заработало.

Хотел ещё пару вопросов спросить без кода про канвас, теперь даже не знаю стоит ли.
А ещё меня занесло в библиотеку THREE.js. Наверно за вопросы о ней меня вообще забанят.

Вы извините и огромное всем вам спасибо за помощь.

[Alexandroppolus]

Добавил id к тегу <a> - заработало.

все твои беды от того, что не ведаешь браузерный дебаггер

[MC-XOBAHCK]

все твои беды от того, что не ведаешь браузерный дебаггер

Это да, точно подмечено. Сейчас начну осваивать дебаггер. Когда то смотрел уроки на ютубе, но тогда ничевошеньки не понимал и мог обращаться к элементам только через $ jQuery. Сейчас засяду.
Я в VS Code всегда мечтал освоить дебагер, попробую разобраться по буржуйским урокам.