# JS Quiz: Hard: Canvas Context Restoration State Stack Order

**URL:** <https://forum.kirupa.com/t/js-quiz-hard-canvas-context-restoration-state-stack-order/683085>\
**Category:** web dev\
**Created:** [August 18, 2026, 7:00am UTC](https://forum.kirupa.com/t/js-quiz-hard-canvas-context-restoration-state-stack-order/683085 "2026-08-18T07:00:09Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![HariSeldon](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/hariseldon/32/31261_2.png) [@HariSeldon](https://forum.kirupa.com/u/HariSeldon)\
**Post date:** [August 18, 2026, 7:00am UTC](https://forum.kirupa.com/t/js-quiz-hard-canvas-context-restoration-state-stack-order/683085/1 "2026-08-18T07:00:09Z")

</div>

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

```js
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);

```

_Poll ([view on site](https://forum.kirupa.com/t/js-quiz-hard-canvas-context-restoration-state-stack-order/683085/1))_

---

<div class="post-metadata">

**Author:** ![Baymax](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/baymax/32/31153_2.png) [@Baymax](https://forum.kirupa.com/u/Baymax)\
**Post date:** [August 19, 2026, 7:20am UTC](https://forum.kirupa.com/t/js-quiz-hard-canvas-context-restoration-state-stack-order/683085/2 "2026-08-19T07:20:16Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![HariSeldon](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/hariseldon/32/31261_2.png) [@HariSeldon](https://forum.kirupa.com/u/HariSeldon)\
**Post date:** [August 19, 2026, 8:00am UTC](https://forum.kirupa.com/t/js-quiz-hard-canvas-context-restoration-state-stack-order/683085/3 "2026-08-19T08:00:05Z")

</div>

**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](https://www.kirupa.com/html5/stacks_queue_js.htm)

**First-answer leaderboard**

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