Почему в konva.js дублируется основной слой stage?

Question

[Александра]

При добавлении второго слоя с картинкой, в разметке дублируется основной слой stage, что я делаю не так? При дальнейшем добавлении слоев опять идет дубль. Вот как это выглядит:

var stage = new Konva.Stage({
        container: 'gamefield', // идентификатор div контейнера
        width: 800,
        height: 600
    });

    var layerBg = new Konva.Layer();

    var bgMain = new Image();
    bgMain.src = "img/bg.jpg";

    bgMain.onload = function() {
        var field = new Konva.Image({
            x: 0,
            y: 0,
            image: bgMain,
            width: 800,
            height: 600
        });

        layerBg.add(field);
        stage.add(layerBg);
    };
    var layerJoker = new Konva.Layer();
    
    var joker = new Image();
    joker.src = 'img/joker.png';
    
    joker.onload = function() {
        var cardJoker = new Konva.Image({
            x: 0,
            y: 0,
            image: joker,
            width: 100,
            height: 140
        });
    
        layerJoker.add(cardJoker);
        stage.add(layerJoker);
    };

Comments

[twobomb]

Возможно там на каждый слой создается canvas

[Александра]

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

[twobomb]

Александра, Я конечно не работал с этой библиотекой, но вижу одну странную вещь.
У вас там грузит 2 картинки и на onload висит что-то типа

layerJoker.add(cardJoker);
        stage.add(layerJoker);

Смею предположить что от порядка добавления зависит и порядок отображения, поэтому одна картинка может перекрывать другую, так как в вашем случае одному богу известно что быстрее загрузится img/joker.png или img/bg.jpg, всего скорее рандом один раз фон быстрее загрузится, и будет всё правильно отображаться, а второй раз (при перезагрузке), joker быстрее. Я бы сделал отдельную функцию загрузки ресурсов. Или

stage.add(layerBg);

        stage.add(layerJoker);

вынес бы за onload, если это позволяет либа, а мне кажется так можно, а оставить только

layerBg.add(field);

        layerJoker.add(cardJoker);

[Александра]

twobomb, спасибо за ваши ответы, скорректировали мою мысль. Нашла в документации это, что отвечает за перерисовку слоя после изменений и вроде все работает как надо )
stage.draw();

Answer 1

[twobomb]

Каждый слой (Layer) представляет из себя один canvas элемент на странице и может содержать в себе фигуры, группы фигур или группы групп.

Comments

[Александра]

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

[Александра]

к примеру вот картинка на отдельном канвасе , и сейчас она не отображается. При обновлении страницы она то есть, то ее нету

[twobomb]

Александра, Она есть, просто она за фоном, соблюдайте порядок загрузки и добавления слоев всё будет ок