StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>You are most likely waiting for images to load before drawing them.</p> <p>Additionally, you are probably drawing lines as soon as you can.</p> <p>You need to wait for all images to load, <strong>then</strong> draw everything in the order you want (from farthest z-order to closest). Do not draw <strong>anything</strong> until all images have been loaded, or your z-order will not be correct.</p> <p>If you want to show items on the screen before all images are loaded, you must redraw <em>everything</em> on each image load, not just draw that one image.</p> <p>Here's an example, where I draw 3 objects: A circle, an image, and a window. I draw them immediately, whether the image is loaded or not, but I draw <em>all</em> of them again once the image is loaded to ensure that the image is correctly in between the other two objects:</p> <p><a href="http://jsfiddle.net/U5bXf/32/">http://jsfiddle.net/U5bXf/32/</a></p> <p>The shorthand relevant code (in case jsfiddle goes down) is:</p> <pre><code>var img = new Image() img.onload = function() { draw() }; img.src = "http://placekitten.com/100/140"; draw(); function draw() { // object one // Now we'll draw the image in between, if its loaded ctx.drawImage(img, 100, 30); // object two } </code></pre> <hr> <h1>Code below this line is a response to the comments</h1> <p>You've since posted code, but you'll notice that the only thing you are drawing in the <code>onload</code> function is the image.</p> <p>The onload function usually happens <em>after</em> the other drawing commands (unless the page is already loaded, then it could be either). You need to move all drawing code into the onload function or else make your own drawing function that loads everything. For example:</p> <pre><code><img id="black_checkers_piece" src="egsdk/BlackCheckersPiece.png" style="display: none;"> <canvas id="c1" style="border:1px solid #998800"></canvas> <script type="text/javascript"> var canvasID = document.getElementById('c1'); var ctx = canvasID.getContext('2d'); var img = new Image(); img.src = document.getElementById('black_checkers_piece').src; img.onload = function(){ // assuming we want the image drawn before the line: ctx.drawImage(img, 10, 10, 32, 32); ctx.beginPath(); ctx.strokeStyle = 'red'; ctx.moveTo(0, 0); ctx.lineTo(50, 50); ctx.stroke(); } </code></pre> <p></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload