submit image multiple times to html5 canvas

Question

0.00/5 (No votes)

See more:

I am trying to display a image multiple times at different locations on a html5 canvas and don't know how to go about doing it. I can draw one image easily but have to find how to do it more than 1 times. Can anyone help me.

what am I doing wrong because it only prints one image on the canvas.

JavaScript

function imageloader() 
{
	//Getting ID's
    imagehtml5canvas = document.getElementById('imagehtml5canvas');
    imagecanvasarea = imagehtml5canvas.getContext("2d");

	xposition = Math.random();
	yposition = Math.random();
	nImages=20;
	
	var CanvasImage = new Image();
	CanvasImage.src = "images/monalisa.jpg"; 		
     CanvasImage.onload = function() {

	
	for(var i=0;i<nImages;i++){
				imagecanvasarea.drawImage(CanvasImage,xposition,yposition,50,50);
		}
    };	  
}

Posted 3-Aug-13 2:59am

Kieran82

Updated 3-Aug-13 8:39am

v2

Add a Solution

Comments

Graham Breach 3-Aug-13 10:32am

Call drawImage() multiple times with different X and Y coordinates. I'm not sure why you would have a problem with that.

[no name] 3-Aug-13 14:46pm

Looks like it's drawing your images 20 times to me. Are you sure it's only once? You probably think it's only once because you are drawing all 20 images at the same location.

Kieran82 3-Aug-13 14:55pm

I put it x and y position at math .random

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Shmuel Zang · Answer 1 · 2013-08-03T20:28:00

It seems like it happens because you calculate the random number once and, use the same calculated numbers for the whole of the images. In addition to that, the Math.random function gives a number between 0 to 1. So, in order to get different locations, you can multiply the random results with some value.

Try to calculate the random location inside the loop. Something like: