html5 canvas - Saving paths or clip areas to reuse

I'm currently implementing a 2d deformable terrain effect in a game I'm working on and its going alright but I can envision it becoming a performance hog very fast as I start to add more layers to the effect.

Now what I'm looking for is a way to possibly save a path, or clipping mask or similar instead of having to store each point of the path in the terrain that i need to draw through each frame. And as I add more layers I will have to iterate over the path more and more which could contain thousands of points.

Some very simple code to demonstrate what I'm currently doing

for (var i = 0; i < aMousePoints.length; i++)
{
    cRenderContext.save();
    cRenderContext.beginPath();
    var cMousePoint = aMousePoints[i];
    cRenderContext.arc(cMousePoint.x, cMousePoint.y, 30, 0, 2 * Math.PI, false);
    cRenderContext.clip();
    cRenderContext.drawImage(cImg, 0, 0);
   开发者_运维知识库 cRenderContext.closePath();
    cRenderContext.restore();
}

Basically I'm after an effecient way to draw my clipping mask for my image over and over each frame

Notice how your clipping region stays exactly the same except for its x/y location. This is a big plus.

The clipping region is one of the things that is saved and restored with context.save() and context.restore() so it is possible to save it that way (in other words defining it only once). When you want to place it, you will use ctx.translate() instead of arc's x,y.

But it is probably more efficient to do it a second way:

1. Have an in-memory canvas (never added to the DOM or shown on the page) that is solely for containing the clipping region and is the size of the clipping region
2. Apply the clipping region to this in-memory canvas, and then draw the image onto this canvas.
3. Then use drawImage with the in-memory canvas onto your game context. In other words: cRenderContext.drawImage(in-memory-canvas, x, y); where x and y are the appropriate location.

So this way the clipping region always stays in the same place and is only ever drawn once. The image is moved on the clipping-canvas and then drawn to look correct, and then the in-memory canvas is drawn to your main canvas. It should be much faster that way, as calls to drawImage are far faster than creating and drawing paths.

As a separate performance consideration, don't call save and restore unless you have to. They do take time and they are unnecessary in your loop above.

If your code is open-source, let me know and I'll take a look at it performance-wise in general if you want.

Why not have one canvas for the foreground and one canvas for the background? Like the following demo

Foreground/Background Demo (I may of went a little overboard making the demo :? I love messing with JS/canvas.

But basically the foreground canvas is transparent besides the content, so it acts like a mask over the background canvas.

It looks like it is now possible with a new path2D object.

The new Path2D API (available from Firefox 31+) lets you store paths, which simplifies your canvas drawing code and makes it run faster. The constructor provides three ways to create a Path2D object:

new Path2D();     // empty path object
new Path2D(path); // copy from another path
new Path2D(d);    // path from from SVG path data

The third version, which takes SVG path data to construct, is especially handy. You can now re-use your SVG paths to draw the same shapes directly on a canvas as well:

var p = new Path2D("M10 10 h 80 v 80 h -80 Z");

Information is taken from Mozilla official site.