KineticJS. draw image using onClick event

I am trying to draw an image in a KineticJS canvas with an onClick event, but it doesn't work. Error: Uncaught TypeError: Unable to call method 'add' of undefined imageObj.onload How do I make the scene and layer visible for drawImage function? Hope smb can help me because I already have no ideas for this.

    var stage = new Kinetic.Stage({
        container: "container",  // div with id 'container'
        width: 578,
        height: 500,                
    });

    var layer = new Kinetic.Layer();        

    function drawImage(src) {       
        var imageObj = new Image();
        imageObj.onload = function() {
            var image = new Kinetic.Image({
                x: 100,
                y: 110,
                image: imageObj,
                draggable: true,
            });

            layer.add(image);

            stage.add(layer);
        };

        imageObj.src = src;
    }                         

      

... img src = "testImage.jpg" onclick = "drawImage (this.src);"

+3


source to share


1 answer


var layer = new Kinetic.Layer();  

      

is this the expression called before your onclick event?



What if you do it

Img src="testImage.jpg" onclick="var layer = new Kinetic.Layer();  drawImage(this.src);"

      

0


source







All Articles