1

i need to do something like the image below with canvas.

Click here to see

Users going to drag and drop images to to yellow bordered squares than change size-position of images. Images will be clipped inside yellow borders. I thought using clipping but, when use global clipping. Images run over other sections. What can i do about this? I want them behave something like independent clipping areas.

Enamul Hassan
  • 5,266
  • 23
  • 39
  • 56
Mirat Can Bayrak
  • 631
  • 7
  • 18
  • See my [answer](http://stackoverflow.com/questions/16437696/multiple-clipping-areas-on-fabric-js-canvas/17101118#17101118) to [Multiple Clipping Areas on fabric js canvas](http://stackoverflow.com/questions/16437696/multiple-clipping-areas-on-fabric-js-canvas) for an example of doing this with Fabric.js – natchiketa Jun 18 '13 at 20:02

1 Answers1

0

Maybe next code example can help you:

HTML:

<canvas id='test' width='400px' height='400px' style='background-color:orange;'>
</canvas>

SCRIPT:

var imgRes=
    ['http://www.planethopia.info/wp-content/uploads/2010/02/space3.jpg',
     'http://www.star.ac.za/graphics/n11lmc_noao.jpg',
     'http://images.wikia.com/memoryalpha/en/images/5/54/Deep_space_9.jpg'];

var images=[new Image(),new Image(),new Image()];
for(var i=0;i<3;i++) {
    images[i].src=imgRes[i];
}

var ctx=document.getElementById("test").getContext("2d");

// image[0]
ctx.save();
ctx.beginPath();
ctx.rect(5,5,190,190);
ctx.closePath();
ctx.clip();
ctx.drawImage(images[0],0,0);
ctx.restore();

// image[1]
ctx.save();
ctx.beginPath();
ctx.rect(5,205,190,190);
ctx.closePath();
ctx.clip();
ctx.drawImage(images[1],0,0);
ctx.restore();

// image[2]
ctx.save();
ctx.beginPath();
ctx.rect(205,5,190,390);
ctx.closePath();
ctx.clip();
ctx.drawImage(images[2],0,0);
ctx.restore();

http://jsfiddle.net/MsSzz/

Update: http://jsfiddle.net/MsSzz/1/

Andrew D.
  • 8,130
  • 3
  • 21
  • 23
  • wow thats nice thanks for response. i understand that you are saving state before doing every clip action. but, i think with that method moving or resizing images are imposible ? – Mirat Can Bayrak Sep 05 '11 at 13:41
  • No. In above example, I simply draw images at point(0,0) of canvas. But you can move, resize, transform images, lines, text. Saving and restoring applied for context. If you make changes to the context after call of `.save` with help of `.clip`, `transform`, `translate`, `scale`, `rotate` you can simply restore previous state of context by simply call of `.restore`. Read in MDN: https://developer.mozilla.org/en/Canvas_tutorial/Transformations You must remember, that your `clip`, `transform`... is applied not for images,text,lines..., but for context. – Andrew D. Sep 05 '11 at 13:54
  • @Mirat Can Bayrak - see Update link in answer. – Andrew D. Sep 05 '11 at 14:53