Question

When drawing on a HTML5 canvas element, is it possible to leave part of it untouched? Can you take part of the image, and then redraw that part if its not directly possible?

The only solution I have thought of is to draw to a seprate, smaller canvas and then copy that over to the main canvas. Is this a feasible approach?

I wish to draw a game scene while preserving the ui. Unfortunately, the draw order is not known in advance.

Answer 1

I guess you’re looking for .clip: http://jsfiddle.net/eGjak/122/.

ctx.rect(100, 50, 200, 100);          // make a region
ctx.clip();                           // constrain to that region
ctx.drawImage($("img").get(0), 0, 0); // draw image