Replacing image in HTML5 canvas using kinetic.js?

StackOverflow https://stackoverflow.com/questions/9411507

Question

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>

No correct solution

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top