Databases
StackOverflow2013
Postsdbo
POReplacing image in HTML5 canvas using kinetic.js?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POReplacing image in HTML5 canvas using kinetic.js?
    text
    copied!<p>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..</p> <pre><code> &lt;script src="kinetic-v1.js"&gt; &lt;/script&gt; &lt;script&gt; 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; }; &lt;/script&gt; &lt;title&gt;HTMl5 drag drop multiple elements&lt;/title&gt;&lt;/head&gt; &lt;body onmousedown="return false;"&gt; &lt;div id="container"&gt; &lt;/div&gt; &lt;ul id="img"&gt; &lt;li&gt;&lt;a href="#" onclick="load(document.getElementById('i1'))"&gt; &lt;img src="dog.png" id="i1" alt="doggie" width="60" height="55"/&gt; &lt;/a&gt;&lt;/li&gt; &lt;li&gt; &lt;a href="#" onclick="load(document.getElementById('i2'))"&gt; &lt;img src="dog2.png" id="i2" alt="Pulpit rock" width="60" height="55" /&gt;&lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;ul id="img1"&gt; &lt;li&gt;&lt;a href="#" onclick="load2(document.getElementById('i4'))"&gt; &lt;img alt="doggie" src="beach.png" id="i4" width="60" height="55" /&gt; &lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" onclick="load2(document.getElementById('i5'))"&gt; &lt;img alt="doggie" src="cat3.png" id="i5" width="60" height="55" /&gt;&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload