Let's see what else, so here's kind of the heart of it.
We're going to go through and do two calls to draw_image.
The first call is going to just take the entire map and squeeze it
down on to the canvas with kind of a reduction of size by a factor of three.
So here we have the image, here we have,
this line specifies a rectangle that includes the entire image.
Okay and that's the size is the width by the height and
the center is exactly the center of the image.
I'm going to take that whole thing and draw it onto something on the canvas.
Canvas width by canvas height, centered exactly the center of the canvas.
So we're going to take the entire image and fill the entire canvas, we do
that one first because now we want to draw on top of it the magnification pane.
So it's the same thing, we have the image except for
we're going to draw a piece of it, that's specified by kind of a source
rectangle as specified by these two parameters, the center and the size.
This gives me the center and the size of the magnification pane.
So I'll just explain this one right here,
how do we specify the place on the original image were we want to actually
center our rectangle the thing that we're going to draw?
So the canvas is reduced by a factor of three, so
if I click on the canvas that gives me this position mag_pose.
Mag_pose of zero, mag_pose of one, to get the corresponding position on the image,
we kind of have to undo this scaling down by a factor of three.
So we're going to need to multiply by this scale,
we're going to need to kind of blow it up by a factor of three.
So that'll give us the center on the original image.
The size is simply going to be a square, 120 by 120
above the original image that's the source and on the destination image.
That as a result will be that we know essentially compression it will be
at full resolution whenever we see it.
If we go down here we can see we've created the frame with canvas width,
canvas height.
We registered our handlers, crank the frame up.
So let's just run it, so we've got our frame here.
This is the Gutenberg map, if you look carefully,
you can see here in the center of the canvas we've kind of blown it up.
It's not as easy to see because there's a good amount of script.
Let's click right over here on this text, now you can see it.
And if I click a lot, move around,
you can see that I'm getting a blown up version of the map here.