Doing some research... It looks like document.body.onload is a very old function that's only retained for compatibility, and it was never updated to the new addEventListener-based mechanisms. (I had assumed that it followed the upgrade path that everything else did.) Use "window" because that's supported.
Loading is the process of downloading the content and converting it into internal structures that the browser can use to render on the screen. The "load" event on the "window" object is triggered when everything on the page -- the page itself, images, stylesheets, and scripts -- have finished this process. <img> tags have a "load" event too, so you can specifically respond to a single image finishing its load process; this is especially useful when you're adding new images after the page is loaded.
In general, a "context" is a fairly nebulous concept in computer science. One thing that various uses of the word "context" have in common is that you have an object or handle that allows you to operate on a single instance of some resource. (It was hard for me to write that sentence; it's the kind of thing you just sort of treat as jargon until you start picking up an intuition for it.)
In this specific case, you're looking at a 2D rendering context. It's an object that gives you a bunch of functions to do stuff with the canvas.
I'm not sure I'm the right person to talk to about periods; I'm pretty sure you have more experience in that regard than I do. A dot, on the other hand, is a member accessor. (Some languages use an arrow -> instead.) "x.y" means that x is an object, and y is one of the things stored in that object or one of the methods defined on that object. In those examples, "getElementById" is a function defined on the "document" object, and "drawImage" is a function defined on the "context" object.
I cannot underemphasize just how
fundamental this concept is to modern software development. I've been in the industry long enough to remember trying to write code WITHOUT objects, and it is VERY difficult to keep things organized without them. (I also remember trying to write code without functions. Those were the dark ages.)
One bit of jargon: A "method" (sometimes "member function") is a specific kind of function. When an object contains a method, that method knows what object it belongs to when you call it. In Javascript, if you call "x.y()" then inside y, the special variable "this" is x. If z is another object of the same type as x, z.y() is the same function but "this" means z inside.