I am trying to add image on a canvas and using Kinetic.js library but

Question

0

Asked: June 16, 20262026-06-16T00:37:46+00:00 2026-06-16T00:37:46+00:00

I am trying to add image on a canvas and using Kinetic.js library but

0

I am trying to add image on a canvas and using Kinetic.js library but there is an error on console

Uncaught TypeError: Type error

my code is:

JS Fiddle

HTML

<!DOCTYPE HTML>

Design

#wrapper{
width:300px;
height:200px;
margin:auto;
border-radius: 15px;
border: 4px solid black;
}

#container{
height:120px;
width:100%;
border:1px solid red;
}
#items, #cliparts{
height:55px;
border:1px solid green;
width:100%;
}

#items img, #cliparts img {
max-height:50px;
max-width:40px;
padding: 0 5px;
border:2px double white;
}
#items img:hover,  #cliparts img:hover{
border:2px double blue;
cursor:pointer;
}

JavaScript

document.getElementById('clip1').addEventListener('click', function() {
                 var stage = new Kinetic.Stage({
                  container: "container",
                  width: 300,
                  height: 100
                });

                 var layer = new Kinetic.Layer();


             var clip_group = new Kinetic.Group({
                  x: 200,
                  y: 30,
                  draggable: true,
               });

            var image_src = 'http://www.clker.com/cliparts/b/9/8/4/12284231761400606271Ricardo_Black_Boy_-_PNG.svg.med.png';

            var clip_image = new Kinetic.Image({
                  x: 0,
                  y: 0,
                  image: image_src,
                  width: 150,
                  height: 138,
                  name: "image",
                });




            clip_group.add(clip_image);
            layer.add(clip_group);
            stage.add(layer);
            stage.draw();               
         });