Source code on GitHub
On this web page the scripts
var ctx = new LazyCanvasCtx('canvas');
ctx object, which
behaves mostly like a normal canvas 2d context object.
For example, try
ctx.fillRect(0, 0, 100, 200);
This should immediately draw a black rectangle.
But once you set
ctx.lazy = true further draw operations will be saved instead of running right away:
You can run run these queued drawing operations by calling the trigger method:ctx.lazy = true; ctx.fillRect(50, 50, 200, 10); // nothing happens! ctx.strokeStyle="#FF0000"; ctx.beginPath(); ctx.arc(100,75,50,0,2*Math.PI); ctx.stroke();
Some interactions, like reading a data property on the context, will force execution of pending operations in order to ensure an up-to-date value is returned.ctx.trigger() // all the queued drawing operations occur
ctx.lazy = true; ctx.fillRect(50, 50, 200, 10); // nothing happens console.log(ctx.strokeStyle); // implicit .trigger() call, queued operations are run
This might be useful for batching draw operations that logically go together, but could be interrupted by DOM renders that would show the intermediate state.