Click here to Skip to main content
13,045,417 members (119,753 online)
Rate this:
Please Sign up or sign in to vote.
I am new to html5 and JavaScript, First sorry if i ask silly question but i really need this.

I have one canvas and I want to insert 10 images at different location. So I created one array to store the co-ordinates, and I have written logic to find new location which is new to and have atleast difference of 150. I know there are many mistakes. but i cant find the locations. Help me, Thank you.

<canvas id = "canvas" height = "100%" width = "100%"></canvas>

Here is my script

var objectArray = new Array();
var canvas = document.getElementById("canvas");
 while (objectArray.length < 10)
            xpos = Math.floor(Math.random() * (canvas.width-100)+100);
            ypos = Math.floor(Math.random() * (canvas.height-100)+100);
            if (objectArray.length > 0)
                for (var i = 0; i < objectArray.length; i++)
                        (xpos > (objectArray[i].coX + 150)) || (xpos + 150 < objectArray[i].coX)
                        (ypos > (objectArray[i].coY + 150)) || (ypos + 150 < objectArray[i].coY)
                        objectArray.push({ coX: Math.abs(xpos), coY: Math.abs(ypos)});
                objectArray.push({ coX: Math.abs(xpos), coY: Math.abs(ypos)});
Posted 16-Apr-13 1:43am
Sergey Alexandrovich Kryukov 16-Apr-13 11:09am
At least 150 between previous and new location, or any two locations? If you want the second option (space all objects), do you understand that this problem can be non-resolvable?

1 solution

Rate this: bad
Please Sign up or sign in to vote.

Solution 1

There are several problems with the code:

- Why are you getting random x and y coordinates between 100 and the maximum edge of the canvas? Are you purposefully avoiding the top and left 100 pixels?

- Your logic will add to the array as long as the new point is more than 150 away from any one other point. It could be right on top of one of the others.

- You are not exiting the loop after adding to the array, so you will add the same point many times.

- Depending on the size of the canvas, you will quickly run out of possible places for the new points (once you fix the logic). You could end up with an endless loop.

- Why do you take the absolute value of a number that's guaranteed to be greater than 100?

Here is a revision that works (see[^])

I realized that you can't size a canvas as percentages, so I used the window dimensions. Also, it seemed a little weird to require the X and Y values each to be more than 150 different. Assuming you really meant for the distance between points to be more than 150, I changed the logic to use the Pythagorean theorem.
var objectArray = new Array();
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var data = document.getElementById('data');
var baddata = document.getElementById('baddata');
canvas.width  = window.innerWidth - 50;
canvas.height = window.innerHeight - 50;
while (objectArray.length < 10) {
    var addToArray = true;
    var xpos = Math.floor(Math.random() * canvas.width);
    var ypos = Math.floor(Math.random() * canvas.height);
    if (objectArray.length > 0) {
        for (var i = 0; i < objectArray.length; i++) {
            var distance = Math.sqrt(Math.pow(Math.abs(xpos - objectArray[i].coX), 2) + Math.pow(Math.abs(ypos - objectArray[i].coY), 2));
            if (distance < 150) {
                addToArray = false;
                baddata.innerHTML += '(' + xpos + ',' + ypos + ') only ' + Math.round(distance).toString() + ' from (' + objectArray[i].coX + ',' + objectArray[i].coY + ')<br>';
    if (addToArray) {
        objectArray.push({ coX: xpos, coY: ypos });
        data.innerHTML += '(' + xpos + ',' + ypos + ')<br>';
NachiketM 17-Apr-13 3:15am
First Thanks for showing interest in the question, I am beginner in programming.

My program is to place 10 canvas at different position to each one of the array elements.I am facing redundant values as you said earlier.

I intentionally given static size, so that i can get the boundary of each canvas. here I am inserting images to the canvas, and canvas should not replace to other canvas or canvas should not overwritten to previous canvas. Such logic I need to write.
Thank you.
Brian A Stephens 17-Apr-13 10:51am
I added working code to the solution, with a jsFiddle example.
NachiketM 17-Apr-13 11:28am
Thanks a lot.

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

  Print Answers RSS
Top Experts
Last 24hrsThis month

Advertise | Privacy | Mobile
Web02 | 2.8.170713.1 | Last Updated 17 Apr 2013
Copyright © CodeProject, 1999-2017
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100