javascript - Canvas images do not load until click event... I want to load when page loads, how? -

I am making warships, board games on an HTML5 canvas. I have a problem loading my ship image when the page loads

background information:

1. I have 2 canvas elements, with 2 references in each

2. If I put PlayerGrid.js before OpponentGrid.js then I have to click on the screen to show my ships. Draws

3kdra () is a grid, and images of a time when they (Createships are drawn CreateShips ()) simply makes various ship items and assign images to each object Does.

4. I have many places to download (and), but they still do not show.

Does anyone know what this can be? Is this a reference in context or canvas? Ship pictures show that when I put OpponentGrid.js before my PlayerGrid.js, but then there is a big problem with my XMLHttpRequest which is not resolvable.

How should I call my Draw method after all loading? Can I finally call my Draw () in my battleship.html?

To ensure that all your images are loaded before using them

Code and a Basic:

  & amp; ;; Doctype html & gt; & Lt; Html & gt; & Lt; Top & gt; & Lt; Link rel = "stylesheet" type = "text / css" media = "all" href = "css / reset.css" /> & Lt ;! - Reset CSS - & gt; & Lt; Script type = "text / javascript" src = "http://code.jquery.com/jquery.min.js" & gt; & Lt; / Script & gt; & Lt; Style & gt; Body {background color: ivory; } Canvas {boundary: 1 px solid red;}