Question

I want to create screen-in-screen functionality in my HTML5 game, and to do this I’m thinking the following pseudo-code:

//Called once per frame
function draw(){
  set a mask rectangle
  draw only pixels of current frame that are inside this rectangle
}

I know I can check the coordinates of individual pixels before drawing them but this seems like it will have a severe impact in performance and want to avoid it…

Is there a native way of implementing this using 2D context methods? And if so, how?

Answer 1

Don’t check for single pixels, just draw whole elements which intersects with current view of your “smaller screen”

Some examples how can u achieve “screen-in-screen”:

Create another (buffer) canvas representing your in-game screen, draw on it, and then draw it on the main canvas.

or

Create another Canvas element which will work as a layer, give it higher z-index than the main canvas, add it to current DOM tree and draw on it.

or

Use clip

---

ps: benchmark for drawing outside current viewport: http://jsperf.com/comparing-onscreen-offscreen-rendering-to-canvas