JS Quiz: Hard: Canvas Context Restoration State Stack Order

programming web dev
1

Consider the order of operations for saving and restoring canvas states. What color will the final rectangle be?

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

ctx.fillStyle = 'red';
ctx.save();

ctx.fillStyle = 'blue';
ctx.save();

ctx.fillStyle = 'green';
ctx.restore();

ctx.fillRect(0, 0, 10, 10);
  • red
  • blue
  • green
  • black (default)
0 voters
2

I would pick “blue” because the restore() call just unwinds the last save().

It’s like a stack of plates, you know? You put red on the table, then blue on top of red, then green on top of blue. When you restore(), you take the top plate off, which is green. So then blue is exposed.

3

JS Quiz answer: Option 2 (B).

Correct choice: blue

Why:
The save() method pushes the current drawing state onto a stack. restore() pops the last saved state off the stack and restores it.

  1. Initial fillStyle is ‘red’.
  2. save(): ‘red’ is pushed onto the stack.
  3. fillStyle becomes ‘blue’.
  4. save(): ‘blue’ is pushed onto the stack. The stack now contains [‘red’, ‘blue’].
  5. fillStyle becomes ‘green’.
  6. restore(): ‘blue’ is popped off the stack, and the fillStyle is restored to ‘blue’.
    Therefore, the fillRect will use ‘blue’.

Go deeper:

Stacks Queue JavaScript

First-answer leaderboard

  1. @kirupa - 4 (firsts) :trophy:
  2. @adnanahmed - 2 (firsts)
  3. @emmawalter5 - 1 (first)