Solved

html5 canvas loads image oddly

Posted on 2013-05-12
4
328 Views
Last Modified: 2013-05-13
Hi,
My code works to load an image(s) on a canvas in html.
My question is why does this work .
To me I should not be abkle to trigger an onload function until the image has been assigned.

for (i=0;i<arr1.length;i++){
		images[i] = new Image();
 		images[i].onload = onImgLoad; //how does event trigger if there is nothing to load
 		images[i].src = arr1[i]; // the image to load doesnt happen until next line
	}

Open in new window

0
Comment
Question by:jagguy
  • 2
  • 2
4 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 39160253
I read it like : << if this event occur on this element >>

onclick : if something/someone click on this
onload : if something/someone load this
0
 

Author Comment

by:jagguy
ID: 39160278
bit it isnt an  'if', it does load and then assign an image. it reads back to front for me.
0
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 39160286
remove line 4 and wait. wait. wait. :)
line 4 is your trigger if the "source" is valid else you have onerror if error loading this
0
 

Author Comment

by:jagguy
ID: 39160561
Ok I might close this thread.
let me get this right  that the onload function doesnt trigger until a src is attached so in this sense it is in the right order.
images[i].onload = onImgLoad; //how does event trigger if there is nothing to load
images[i].src = arr1[i]; // the image to load doesnt happen until next line

Open in new window

0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
The viewer will learn how to dynamically set the form action using jQuery.

831 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question