How can this function which has undefined argument be able to run?

Question

In https://mcmap.net/q/871573/-export-visjs-network-to-jpeg-png-image, the essence of the code is:

network.on("afterDrawing", function (ctx) {
    var dataURL = ctx.canvas.toDataURL();
    document.getElementById('canvasImg').src = dataURL;
});

How can it run? ctx isn't defined anywhere. In the Vis.js' documentation, the afterDrawing event has this description:

Name	Properties	Description
afterDrawing	canvas context	Fired after drawing on the canvas has been completed. Can be used to draw on top of the network.

Menagerie

the afterDrawing event provides the ctx to the passed callback. see the docs – Pamulapan

this is a concept called callback functions, once .on is done doing it's thing, it will return a value ctx which you can use in your code. – Fillister

"isn't defined anywhere". Well, it is defined as parameter of the function. – Illumination

And listed as a 'property' of the afterDrawing event in the docs (though this is confusing language). – Pamulapan

@Pamulapan ah, ctx is short for canvas context. So when the method on() completes, it will return the canvas context so the function can pick up? – Menagerie

Yes, that's the gist of it. – Pamulapan

Answer 1

ctx is short for canvas context. So when the method on() completes, it will return the canvas context so the function can pick up. This is a concept called callback functions.

Menagerie