Take the 2-minute tour ×

In Kineticjs I want to drag an img into a rect shape.

I was wondering if anyone could tell me how to do that? I know how to drag a shape or image around, but i want to drag the img into the shape.


share|improve this question
can you share what you have done until now? and you really need to work on your acceptance rate –  Ani Jan 20 '13 at 10:01
html5canvastutorials.com/kineticjs/… You can set the background of a shape by firing a .on(mouseover ) event on the shape and then removing the image. And yes, please build up some code for us to see as Ani says. Place it in a jsfiddle if possible. –  SoluableNonagon Jan 20 '13 at 20:03
The other thing you could do is replace the rectangle with the image and a rectangle in it's background. –  SoluableNonagon Jan 21 '13 at 1:54
thanks guys, I've added the jsfiddle link, thanks in advance for all your help! –  TriFu Jan 21 '13 at 2:52
Here is the jsfiddle.net/Ps3TU of what I'm trying to do, I'm trying to drag the darth vader image into the rectangle, and have the image show up in there. Ideally, I'd like to have multiple boxes eventually where you can drag different images into. Most of the code here was from: html5canvastutorials.com –  TriFu Jan 21 '13 at 2:56

1 Answer 1

up vote 1 down vote accepted

http://jsfiddle.net/Ps3TU/5/ is a step toward something you'd want to do.

  darthVaderImg.on('dragmove', function () {
      var userPos = stage.getUserPosition();
            rectShape.setFillPatternOffset(this.getWidth(), 70);

But what you're really looking to do is something like this: http://jsfiddle.net/8Vdht/3/

darthVaderImg.on('dragmove', function () {
 var userPos = stage.getUserPosition();
  else {

The thing is, you can't (yet) just place an image (inside) a rectangle and later extract it all that easily. So you need to resort to a trick, which resizes the image and makes it look like it's in the rectangle. This fixes the position of the image and you get to move it outside of the rectangle.

share|improve this answer
If you're looking to dynamically place images into various other shapes you have to do a lot of work with cropping images to make them fit. This solution was only for rectangles, since images are saved as rectangles. –  SoluableNonagon Jan 21 '13 at 7:49
You sir...are awesome, it's more or less what I was trying to get at. Thanks a bunch! –  TriFu Jan 21 '13 at 8:41
Glad to help, I've been trying to create some insert/extract function for images into shapes, but I've reverted to this simpler way. –  SoluableNonagon Jan 21 '13 at 14:36

Your Answer


