is it possible to animate canvas clip region's position? - html

Question

I want to move a clip region's position and then draw in the clip region. How come the following approach is not working?
Thanks for any enlightenment :-)
Gerard
<canvas id="canvas" width="150" height="150"></canvas>
<script>
function fade() {
var level = 0;
var xClip=0, yClip=0;
var step = function ( ) {
var ctx = document.getElementById('canvas').getContext('2d');
ctx.fillRect(0,0,150,150);
// Create a circular clipping path
ctx.beginPath();
ctx.arc( xClip, xClip, 60, 0, Math.PI*2, true);
ctx.clip();
// draw background
var lingrad = ctx.createLinearGradient(0,-75,0,75);
lingrad.addColorStop(0, '#232256');
lingrad.addColorStop(1, '#143778');
ctx.fillStyle = lingrad;
ctx.fillRect(-75,-75,150,150);
if (level < 15) {
level ++;
xClip = yClip = level*10;
console.log("level: " + level);
console.log("xClip: " + xClip);
setTimeout(step, 1000);
}
};
setTimeout(step,100);
}
fade();
</script>

Answer 1

Animating the clip.
When you apply the clip more than once the clip region is clipped to the existing clip. Animating the clip region without regarding this will create an ever smaller clip region.
Save and Restore.
You need to save and restore the canvas state when animating clip regions. ctx.save() save the current canvas 2D state to a stack, ctx.restore() pops the last saved state from the top of the stack. Save and restore can be nested. Each save must have a restore at some point or you will end up chewing up memory and eventually overflowing the state stack.
Fixing your code.
Your code is almost there and only requires a few modifications to do what you want. I have also moved the canvas.getContext() out of the fade function as you only need to do this once.
function fade() {
var level = 0;
var xClip=0, yClip=0;
var step = function ( ) {
ctx.fillRect(0,0,150,150);
//---------------------------------------------
ctx.save(); // push the current unclipped state to the state stack.
// Create a circular clipping path
ctx.beginPath();
ctx.arc( xClip, xClip, 60, 0, Math.PI*2, true);
ctx.clip();
ctx.fillStyle = lingrad;
ctx.fillRect(-75,-75,150,150);
if (level < 15) {
level ++;
xClip = yClip = level*10;
setTimeout(step, 1000);
}
//---------------------------------------------
ctx.restore(); // pop the last saved state from the state stack
// restoring the clip region to the default
// ready for the next call to step.
};
setTimeout(step,100);
}
// get the 2D context only once
var ctx = document.getElementById('canvas').getContext('2d');
// As the gradient does not change over time don't create this every
// frame as it is a expensive operation
var lingrad = ctx.createLinearGradient(0,-75,0,75);
lingrad.addColorStop(0, '#232256');
lingrad.addColorStop(1, '#143778');
fade();