Kind of new to javascript. I'm wondering why I get "INDEX_SIZE_ERR: DOM Exception 1" when I first load the page, but not if I reload afterwards.

The error is from this line:
function saveDrawingSurface() {
console.log ("saveDrawingSurface "+context.canvas.width+" "+context.canvas.height);
drawingSurfaceImageData = context.getImageData(0,0,context.canvas.width,context.canvas.height); <=== this line

It prints that the canvas is 300 x 0 at first, so I can see why that would produce an error. But I thought this function would only be called once the context was valid. In my javascript file I have this:

window.onload = init();

and the context is obtained in init(). Also saveDrawingSurface is called from there too.

From HTML I have this at the end of my HTML, within the <html> tag after the <body> tag.

<script src='myscript.js'></script>

I thought that the onload statement would ensure that the javascript which set the context would not be called until after the page had loaded. I'm not sure where the canvas size is going wrong. I have this for its CSS and no reference to the size in the tag declaration. Yet that 300 x 0 number is weird, I would think it would at least be the default which is 300x200 right?

#canvas {
background: #ffffff;
width: 100%;
height: 85%;

Thanks for any help!