Canvas createPattern() and fill() rectangle rendering on mouse move

Question

Iv`e created canvas pointer error. It shows a target to desired location (mouse position):

http://jsfiddle.net/conmute/rk276q3g/

The problem is in Firefox rendering, (move mouse very fast):

http://jsfiddle.net/conmute/rk276q3g/1/

rectangle acts weirdly, and i am missing smth. Can anybody point what exactly?

ctx.rect(
    // start x,y pair
    patternOffset.x, -p.circle.h/2 - patternOffset.y - 12,
    // end x,y pair
    -p.repeat.w, distance - p.circle.h - 1
);

ctx.fillStyle = pattern;
ctx.fill();

Status update

I fixed this issue: http://jsfiddle.net/rk276q3g/2/

By commenting out ctx.save() and .restore() and placing arrow image before drawing the rectangle.

So actually i fixed this issue, But the thing is...

Question update

... what if i need to draw after i did some ctx.translate(... and some drawings?

I need to use ctx.save() and .restore() methods, but it cause a problems. How can i do this work without commenting them? Cause when i remove them it solves problem.

I thought that i understand properly how they work, but i see that i don't.

Update

It appears that by removing all ctx.restore() and ctx.save() solves the solution, but when i add my part to be drawn after i translateed back by calculating previous position, problem appears again!

Please see: http://jsfiddle.net/rk276q3g/5/

Answer 1

The save() and restore() work as follows: The <canvas> maintains a stack of its state and each item in the stack represents all the attributes of the context (lineStyle, strokeWidth, transform, …). By calling save() a new item of the state is created and pushed onto stack. By calling restore() the item is popped from the stack and the state of the canvas is set to the properties from the item on top of the stack.

Here is a good example.

To answer your question: You need to save the state of the context before you translate and rotate it, to create a new current item on the stack, which you can modify to your needs. Once you've done the heavy lifting and want to draw some things based on the default values, you need to restore the state and every paint action will be based on default values.

To not run into conflicts as you do, I always write painting methods following this pattern:

function drawSomethingFanzy (ctx) {
    ctx.save();

   //some really awesome drawing here;

   ctx.restore();
}

Edit

I have missed to point out that save() creates a new Item on the stack, but does not restore the default settings, all settings remain unchanged, but are saved and can be restore()-ed later on.

Edit

I attached a screenshot of the result which shows up at my computer from fiddle. For me that looks correct, so could please post a picture that shows what the exact problem is, or what you would like to achieve? I honestly do not get what the problem is. Do you mean the gaps in the pattern fill?

Update

I just had a moment and created a fiddle of what I think you want here. I hope it helps!