-1

I am working on HTML5 canvas with image manipulation. In my canvas I have number of images. When I want to clip the images individually. But when I clip one image by creating a shape and use clip() function, it is working fine. But the problem arise when I try to clip another image using the same method. As the canvas stored the previous shape it will concatenate with the new one and clip the second image accordingly. I want destroy the previous shape. Please note that I can't use the clearRect() to clear the canvas as my previous clipped image is there.

Please ref the link :

Demo Problem

In the link drag the image into canvas predefined layer and drag the image around. You can clearly see that the image got clipped properly if it try to go out of the border.

Now drag another image into the canvas in a different box. Now you can see the clipping is not functioning properly.

Here what I have done in the script :

JS Script

Here the JSFiddle Link

JSFiddle Link

Can you help me to fix this issue? It will be helpful if you find another way to clear the previous shape.

Thanks in advance.

Tatha
  • 127
  • 1
  • 14
  • I would like to help, but my AV is say not to go to your links because they are known for containing viruses, post your examples on JSFiddle – QBM5 Sep 23 '14 at 13:51
  • 1
    Did you miss that you had to use save/restore before/after clipping ? Maybe you just didn't understood that canvas is a state machine == you have to watch for canvas's state by yourself. – GameAlchemist Sep 23 '14 at 14:20
  • 1
    @GameAlchemist. +1 I suspect you're correct that Tatha needs save/restore. To clarify your point: Previous clipping areas will persist for all new drawings. To avoid this persistence, do `context.save()` before clipping and then do `context.restore()` when you are finished clipping & drawing. That way you can apply a fresh clip for new drawings. – markE Sep 23 '14 at 16:40
  • Thank you sir for your reply. But I have used the save/restore in this code before, but I remove the save/restore from the later on as it only save/restore the properties of the canvas context, not the shape or clipping area. I want to undo the shape for clipping area and create a new one. Can you help me? – Tatha Sep 24 '14 at 05:13

2 Answers2

0

I have fix the issue by own. The canvas doesn't provide the multiple image clip option. So if you want to clip multiple image in your canvas you have to use your own clip function. Just clear the area by clearRect() of the canvas outside your selection. Iterate this process for each image and you are done !

Solution Link :

Solution Demo

JS Script Link :

JS Script

Thanks.

Tatha
  • 127
  • 1
  • 14
0

The best solution I could find is to use a hidden canvas, and draw to that, then use the putImageData method onto your main canvas.

var c = document.getElementById("myCanvas");
var ctemp = document.getElementById("myCanvasTemp");

var ctx = c.getContext("2d");
var ctxTemp = ctemp.getContext("2d");

ctxTemp.fillStyle = "red";
ctxTemp.fillRect(10, 10, 50, 50);

ctxTemp.fillStyle = "blue";
ctxTemp.fillRect(20, 20, 50, 50);

function copy() {
    var imgData = ctxTemp.getImageData(10, 20, 50, 10);
    ctx.putImageData(imgData, 10, 10);
}
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>


<canvas id="myCanvasTemp" width="300" height="150" style="display:none;">
Your browser does not support the HTML5 canvas tag.</canvas>


<br /><br />
<br />
<button onclick="copy()">Copy</button>
tjgersho
  • 1
  • 2