Javascript Behavior Changes When Single-stepping

If I single-step the following js code (using Firefox 44 on OS X), I get the desired result: the context.setTransform(...) is executed and the image is magnified by 2. If on the o

Solution 1:

You're facing a 'race' issue between two async function (the anonymous function hooked on the Image.onload that actually performs drawImage and the myDrawingFunction function). In the debug case, the image has time to load, so the onload triggers at once and does what you want. In the case where you just load regularly the page, the context is set/unset before image is loaded : when the image gets loaded it's too late (context was restored) and the image is drawn at 1:1 scale.

Proper way of coding such things is to separate concerns and wait for both the dom and all images to load before doing anything.

Solution 2:

That's completely normal and expected behavior.

You are mixing synchronous and asynchronous calls.

Synchronous calls will be made one by one, in written order, while asynchronous ones should be stacked on top of the operations to execute.

So a step by step of your code would be :

---

1. Fetch myfrac.js
2. Define myDrawImage function and myDrawingFunction function *
3. Call myDrawingFunction
4. Define canvas and ctx variables
5. Clear the context _{(useless if nothing was drawn before and if something was, previous var definitions should be made outta here)}
6. Save the context properties
7. Call myDrawImage
8. Define img
9. Set its onload event handler (this handler will be stacked)
10. Set img's src
11. Restore the context properties (nothing was drawn on it yet)
12. Do anything else has to be done by other scripts if any

 12.+x. Call the img onload handler = drawImage()

---

As you can see, at the time the onload handler is called, you already restored the context's properties, and reset the context's matrix.

*