[a.gilling]

Hello,

Im currently trying to write a html5 canvas program that lets you upload an image into a canvas area, drag and drop and resize the image all dynamically.

Ive managed to create a program that does all this but want the images to load on a button press or an image that looks like a button but loads a different image into the canvas area. At the moment the images are loaded in using a HREF like follows:

<ul id="img">
        <li><a href="#"><img src="img/7.png" id="i1" alt="1" width="106" height="118" /></a></li>
        <li><a href="#"><img src="img/8.png" id="i2" alt="2" width="106" height="118" /></a></li>
        <li><a href="#"><img src="img/9.png" id="i14" alt="3" width="106" height="118" /></a></li>
        
      </ul>

This displays the image, you can then click on the image which loads it into the canvas area with the help of this code.

$("ul#img a").click(function(){
        addProduct( $('img', this) );            
    });
    
        
   function addProduct( imgObj ){
var newimage = new Kinetic.Group({
          x: 250,
          y: 250,
          draggable: true
        });
       var layer = new Kinetic.Layer();
       
        layer.add(newimage);
        stage.add(layer);

        var imageObj = new Image();
        imageObj.onload = function() {
          var image = new Kinetic.Image({
              image: imageObj,
            x: 0,
            y: 0,
            name: "image"
          });

I want to be able to display one image ( one that looks like a button) then load in a different one.

Any ideas?