restore not correctly restoring clipping area

[GoogleCodeExporter]

I notice the changelog indicates that this issue has been resolved; however, 
I'm using flashcanvas_pro compiled in august 2011 and still encountering it.

What steps will reproduce the problem?
1. save context
2. create a path
3. clip
4. transform
5. drawImage
6. restore

Here is a screenshot of the difference between firefox and IE
http://i.imgur.com/KXKGr.png

I saw some issues arise from drawImage so I've tried adding loadImage with no 
success.

note: the image being drawn is being pulled from a second canvas

Original issue reported on code.google.com by prim...@gmail.com on 17 Jan 2012 at 8:19

[GoogleCodeExporter]

Could you give me a more concrete example?

I wrote a test code attached to this comment, but I couldn't reproduce your 
problem even when I used FlashCanvas Pro 1.5.

Original comment by revu...@gmail.com on 21 Jan 2012 at 4:55

Attachments:

• issue18.zip

[GoogleCodeExporter]

I am having the same issue.
It seems that restoring, after a clip has been created, does not remove the 
clip.

In short, my code is similar to this:
var x1 = -218,
    x2 = 218,
    y1 = -218,
    y2 = 218;

ctx.save();
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y1);
ctx.lineTo(x2, y2);
ctx.lineTo(x1, y2);
ctx.closePath();
ctx.clip();
ctx.drawImage(file1, x1, y1, width1, height1);
ctx.restore();

x1 = -239.5,
x2 = 239.5,
y1 = -239.5,
y2 = 239.5;

ctx.save();
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y1);
ctx.lineTo(x2, y2);
ctx.lineTo(x1, y2);
ctx.closePath();
ctx.clip();
ctx.drawImage(file2, x1, y1, width2, height2);
ctx.restore();

Assume that file1 and file2 are image objects.
Width1, height1, width2 & height2 are the dimensions of their relevant images.

This code outputs two images inside a square.
The first image is on the outside and the second is on the inside, right next 
to the first
I am using a clip to draw a section for each image, so that they don't overflow.

The clip for the second image seems to be used and the first one is ignored.
this means the the first image isn't visible, as the second clips cuts it off.

You can see what I mean from my attachment.

Kind regards,
Lee

Original comment by regis...@greenimp.co.uk on 17 Sep 2012 at 9:19

Attachments:

• sample.png

[GoogleCodeExporter]

Hi,
I have just run some more tests and this appears to be an issue caused by 
drawImage being asynchronous.
As both of my clip/draw commands are so close together, it seems that the 
second one is happening before flash has cached the first image, and so it 
clips it.

I have modified my code, using ctx.loadImage, so that I can immediately start 
caching the images in flash and that seems to have resolved the issue.
(I found the advice on loadImage here: 
https://groups.google.com/d/msg/flashcanvas/31h-iVkK8XQ/RnDTjtwZw-sJ)

Hopefully that is the same issue that the original poster was having.

Regards,
Lee

Original comment by regis...@greenimp.co.uk on 17 Sep 2012 at 10:31