Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

TiboriusDev's avatar

Konva Canvas disappears after Livewire function,

Hi,

I load a canvas with Konva. If I then execute “@this.saveExercise(json);" in "saveData()”, which is at the bottom in JS, the canvas disappears. It also happens when I execute “wire:click”.

Livewire 3 Laravel 11

<div>
    <x-button x-on:click="saveData" label="save" />
    <div id="container">
        <div id="spielfeld"></div>
    </div>
<script>
    var sceneWidth = 780;
    var sceneHeight = 1200;
    var stage, layer;

    var stage = new Konva.Stage({
        container: 'spielfeld',
        width: sceneWidth,
        height: sceneHeight,
    });

    function loadCanvas(){
        var stage = new Konva.Stage({
            container: 'spielfeld',
            width: sceneWidth,
            height: sceneHeight,
        });
        layer = new Konva.Layer();
        stage.add(layer);
    }
    loadCanvas();

    function saveData(){
        var json = stage.toJSON();
        @this.saveExercise(json);
        $openModal('exerciseInfoModal');
    }
</script>
public function saveExercise($jsonData){
    $this->data = $jsonData;
}
0 likes
1 reply
TiboriusDev's avatar
TiboriusDev
OP
Best Answer
Level 1

wire:ignore was the solution

<div wire:ignore id="container">
	<div id="spielfeld"></div>
</div>

Please or to participate in this conversation.