Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

You can just replace image property of Konva.Image . Or update src of native image:

var card = new Konva.Image({
    x: 200,
    y: 50,
    width: 100,
    height: 100
var imageObj = new Image();
imageObj.onload = function() {
  card.image(imageObj);
imageObj.src = '/path/to/image.jpg';
// later
var imageObj2 = new Image();
imageObj2.onload = function() {
  card.image(imageObj2);
imageObj2.src = '/path/to/image.jpg';
var imageObj = new Image();
var card = new Konva.Image({
    x: 200,
    y: 50,
    width: 100,
    height: 100,
    image: imageObj
imageObj.onload = function() {
  card.getLayer().draw();
imageObj.src = '/path/to/image.jpg';
// later
imageObj2.src = '/path/to/image.jpg'; // it should trigger onload
                This way of updating the image unfortunately never worked for me. I tried both approaches, but the card is just a white space after updating to the new image. I tried with version 7.0.3 and 7.2.4 of konvajs, but the only way I can update an image in the canvas is to remove the node and recreate it
– dominik andreas
                May 5, 2021 at 12:09
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.