Home/ Questions/Q 7575239
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T16:38:16+00:00

Hey guys I’m trying to replace the image loaded on the html5 canvas on

  • 0

Hey guys I’m trying to replace the image loaded on the html5 canvas on click of the next image in the same list..
Like I have two lists of images using different functions to get onto the canvas..
Now what I want is to replace the first uploaded pic on clicking of the next image..
same goes for the other list..
Please help me out thanks..

             <script src="kinetic-v1.js">
             </script>
            <script>
            function drawImage(imageObj){
             var stage = new Kinetic.Stage("container", 578, 500);
             var layer = new Kinetic.Layer();
             var x = stage.width / 2 - 200 / 2;
             var y = stage.height / 2 - 137 / 2;
             var width = 200;
             var height = 137;

            // darth vader
              var darthVaderImg = new Kinetic.Shape(function(){
                var context = this.getContext();
                context.drawImage(imageObj, x, y, width, height);
                // draw invisible detectable path for image
                context.beginPath();
                context.rect(x, y, width, height);
                context.closePath();
            });

            // enable drag and drop
               darthVaderImg.draggable(true);

            // add cursor styling
               darthVaderImg.on("mouseover", function(){
               document.body.style.cursor = "pointer";
            });
            darthVaderImg.on("mouseout", function(){
                document.body.style.cursor = "default";
            });
            //remove image on double click
              darthVaderImg.on("dblclick dbltap", function(){
              layer.remove(darthVaderImg);


              layer.draw();
                });
              layer.add(darthVaderImg);
              stage.add(layer);
        }
         function drawImage2(imageObj){
            var stage = new Kinetic.Stage("container", 578, 500);
         var layer = new Kinetic.Layer();
            var x = stage.width / 2 - 100 ;
            var y = stage.height / 2 - 137 ;
            var width = 200;
            var height = 137;

            // darth vader
            var darthVaderImg2 = new Kinetic.Shape(function(){
                var context = this.getContext();
                context.drawImage(imageObj, x, y, width, height);
                // draw invisible detectable path for image
                context.beginPath();
                context.rect(x, y, width, height);
                context.closePath();
            });

            // enable drag and drop
            darthVaderImg2.draggable(true);

            // add cursor styling
            darthVaderImg2.on("mouseover", function(){
                document.body.style.cursor = "pointer";
            });
            darthVaderImg2.on("mouseout", function(){
                document.body.style.cursor = "default";
            });
            //remove image on double click
            darthVaderImg2.on("dblclick dbltap", function(){
            layer.remove(darthVaderImg2);


            layer.draw();
                });
            layer.add(darthVaderImg2);
            stage.add(layer);
            }

           function load(img){

            // load image
            var imageObj = new Image();
            imageObj.onload = function(){
                drawImage(this);

            };
            imageObj.src = img.src;
            };
              function load2(img){
               // load image
               var imageObj = new Image();
               imageObj.onload = function(){
                drawImage2(this);
             };
              imageObj.src = img.src;
            };
             </script>
             <title>HTMl5 drag drop multiple elements</title></head>
              <body onmousedown="return false;">
              <div id="container">
             </div>
            <ul id="img"> <li><a href="#" onclick="load(document.getElementById('i1'))">
    <img src="dog.png" id="i1" alt="doggie" width="60" height="55"/>
    </a></li>
    <li>
        <a href="#" onclick="load(document.getElementById('i2'))">
        <img src="dog2.png" id="i2" alt="Pulpit rock" width="60" height="55" /></a>
    </li>
    </ul>
    <ul id="img1">
        <li><a href="#" onclick="load2(document.getElementById('i4'))">
            <img alt="doggie" src="beach.png" id="i4" width="60" height="55" />
            </a></li>
            <li><a href="#" onclick="load2(document.getElementById('i5'))">
            <img alt="doggie" src="cat3.png" id="i5" width="60" height="55" /></a></li>
            </ul>
            </body>
            </html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Here..I just updated the kineticJs library and used an extra tag ..
    by courtesy of a friend berry

           <script src="kinetic-v3.8.0.min.js">
       </script>
       <script>
        var stage = null;
        var groups = {
            dog: null,
            bla: null
        }

        function setupStage() {
            stage = new Kinetic.Stage("container", 578, 500);
        };

        function drawImageOnLayer(layer, img) {
            var x = stage.width / 2 - 100 ;
            var y = stage.height / 2 - 137 ;
            var width = 200;
            var height = 137;

            var kinecticImg = new Kinetic.Shape(function(){
                var context = this.getContext();
                context.drawImage(img, x, y, width, height);
                // draw invisible detectable path for image
                context.beginPath();
                context.rect(x, y, width, height);
                context.closePath();
            });

            // enable drag and drop
            kinecticImg.draggable(true);

            layer.clear();
            layer.add(kinecticImg);
            layer.draw();
        }
         function drawImageOnLayer2(layer, img) {
            var x = stage.width / 2 - 300 ;
            var y = stage.height / 2 - 237 ;
            var width = 200;
            var height = 137;

            var kinecticImg = new Kinetic.Shape(function(){
                var context = this.getContext();
                context.drawImage(img, x, y, width, height);
                // draw invisible detectable path for image
                context.beginPath();
                context.rect(x, y, width, height);
                context.closePath();
            });

            // enable drag and drop
            kinecticImg.draggable(true);

            layer.clear();
            layer.add(kinecticImg);
            layer.draw();
        }

        function loadWithType(type, img) {
            if (groups[type]) {
                stage.remove(groups[type]);
            } 
            groups[type] = new Kinetic.Layer();
            stage.add(groups[type]);

            drawImageOnLayer(groups[type], img);
        };
        function loadWithType2(type, img) {
            if (groups[type]) {
                stage.remove(groups[type]);
            } 
            groups[type] = new Kinetic.Layer();
            stage.add(groups[type]);

            drawImageOnLayer2(groups[type], img);
        };
          </script>
          <title>HTMl5 drag drop multiple elements</title></head>
           <body onload="setupStage();" onmousedown="return false;">
           <div id="container">
           </div>

      <ul id="img"> <li><a href="#"onclick="loadWithType 
        ('dog',document.getElementById('i1'))">
    <img src="dog.png" id="i1" alt="doggie" width="60" height="55"/>
    </a></li>
    <li>
        <a href="#" onclick="loadWithType('dog', document.getElementById('i2'))">
        <img src="dog2.png" id="i2" alt="Pulpit rock" width="60" height="55" /></a>
    </li>
    </ul>
    <ul id="img1">
     <li><a href="#" onclick="loadWithType2('bla', document.getElementById('i4'))">
    <img alt="doggie" src="beach.png" id="i4" width="60" height="55" />
    </a></li>
   <li><a href="#" onclick="loadWithType2('bla', document.getElementById('i5'))">
    <img alt="doggie" src="cat3.png" id="i5" width="60" height="55" /></a></li>
   </ul>
   </body>
    • 0