How to achieve 10 random x and y co-ordinates with difference of 150

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++)
                {
                    if
                        (
                        (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)});
                    }
                }
            }
            else
            {
                objectArray.push({ coX: Math.abs(xpos), coY: Math.abs(ypos)});
            }
        }

Tags: Javascript, HTML5, jQuery