Search code examples
htmlcanvasclip

Html Canvas Clip - Speed issues

I split my canvas into two. I need to draw on each side, defining a clipping region for both. Each side has to do similar things, like drawing text in colours, drawing circles etc.

I have read that you should keep your fillStyle and strokeStyle changes to a minimum. However I have also read you must keep your save and restores to a minimum as well.

So what is faster?

Save the canvas, clip the left hand side, do ALL the drawing for that side for the multiple colours, then restore and repeat for the right hand side?

Or ... Set the first text colour. Clip the left hand side. Draw all text for this colour. Then clip the right hand side (without restting fillStyle) and draw all the same colour text for the right hand side. Then set the next fillStyle and then clip each side and draw text for this colour? Etc

Anyone know?

Also if I set one clip region, then set another clip region without saving and restoring, what actually happens?

Solution

  • As always, you must performance test with your own project's code.

    The context maintains internal variables relating to its current state (colors, transforms, current path, compositing applied, etc).

    You can save a copy of the current context state using context.save. Then after altering the context state, you can restore the original context state with context.restore. Note: you can nest multiple save/restore if needed.

    fillStyle is a context state so changing fillStyle='green' followed later by fillStyle='blue' is faster than save/restore because just 1 state variable is being reset rather than every state variable that's done during save/restore.

    The point is that you often gain performance by saving+resetting individual state values rather than doing a full context.save/context.restore.

    Minimizing state changes will maximize performance, so for example, batching all green drawings will help performance.

    Clipping is a complex operation and is more expensive than simple state changes like changing fillStyle. With GPU acceleration the clipping is accomplished much more efficiently and is therefore considerably less costly than clipping without a GPU.

    About changing clipping regions: Clipping is always done only on the last path defined. So setting another clipping region will undo the previous clipping region (unless the previous and current path are identical).

    About left and right clipping regions: If your design permits, you might want to define both the left and right clipping regions at once into 1 combined clipping region. Since paths can be disconnected, defining 1 clipping path with 2 non-intersecting parts is allowed.

    As the car companies warn: "Your mileage may vary". But you might perf test this method:

    • Define your left and right clipping regions in 1 clipping path

    • Set fillStyle="red" and do all your red drawings at once (both right and left)

    • Reset fillStyle="blue" and do all your blue drawings at once, etc, etc.

    One final thought: All projects have their own distinct requirements so you must perf test your actual code rather than relying exclusively on general rules. Don't skip the perf tests--especially if you will be deploying on mobile where canvas is slow by nature.

    Good luck with your project!

    [ Additional note about clipping ]

    A clipping region is semi-permanent. Once it is set it remains even if the context.clip command is issued again. The new clip command will further restrict all previous clipping regions.

    To clear a clipping path you must wrap your clips inside context.save & context.restore(). Alternatively, resizing the canvas will force the context state to be restored to defaults--but resizing will also clear all canvas content: canvas.width=canvas.width

    Here's and example of a single path consisting of a left and right square:

    enter image description here

    // left square
ctx.beginPath();
ctx.moveTo(50,50);
ctx.lineTo(150,50);
ctx.lineTo(150,150);
ctx.lineTo(50,150);
ctx.closePath();

// right square
ctx.moveTo(200,50);
ctx.lineTo(300,50);
ctx.lineTo(300,150);
ctx.lineTo(200,150);
ctx.closePath();

ctx.strokeStyle="red";
ctx.stroke();

    Create a clipping region from this left+right path. 

    // create a clipping region from the left+right path
ctx.clip();

    Fill the entire canvas with green. The green will only be drawn inside the clipping region (inside the left and right squares).

    enter image description here

    // draw a green rect over the entire canvas
// the green will only be drawn inside the clipping region
ctx.fillStyle="green";
ctx.fillRect(0,0,canvas.width,canvas.height);

    If you add a second clipping region, the result is that drawing will only be visible in the union of all clipping paths.

    So if the second clipping region slightly overlaps the first, all drawings will only be visible inside the union of the first and second clipping regions. The blue section in the following illustration is the union of the 2 clipping paths.

    enter image description here

    ctx.beginPath();
ctx.moveTo(0,115);
ctx.lineTo(canvas.width,115);
ctx.lineTo(canvas.width,135);
ctx.lineTo(0,135);
ctx.clip();
ctx.closePath();
ctx.fillStyle="blue";
ctx.fillRect(0,0,canvas.width,canvas.height);