# How Can I Randomize Coordinates In Javascript Canvas?

## 18 February 2020 - 1 answer

Newbie here, currently learning how to code. My teacher gave me the task of proving myself in canvas by making a smiley face on my own. This is the result so far.

Now he gave me the task of randomizing the coordinates, so that the smiley as a whole appears in a new place everytime (whether that happens on load or through a button is my decision).

Edit: to clarify, my problem lies more within the logic behind altering the coordinates of my canvas. I've tried to figure out how to do this, and know that I'll need `Math.random` for that.

Edit: to clarify, my problem lies more within the logic behind

My code:

``````<body onload="draw();">
<canvas id="canvas" width="150" height="150"></canvas>

<script type="application/javascript">
function draw() {
var canvas = document.getElementById("canvas");
var smiley = canvas.getContext("2d");

//Face shape
smiley.beginPath();
smiley.arc(75, 75, 50, 0, Math.PI * 2, true);

//Right eye
smiley.moveTo(65,55);
smiley.arc(55,55,10,0, Math.PI * 2, true);

//Left eye
smiley.moveTo(105,55);
smiley.arc(95,55,10,0, Math.PI * 2, true);

//Mouth
smiley.moveTo(35,75);
smiley.arc(75, 75, 40, 0, Math.PI, false);
smiley.moveTo(36,81);
smiley.lineTo(114,81);
smiley.stroke();

//Pupils
smiley.beginPath(58,55);
smiley.moveTo(58,55);
smiley.arc(55,55,3,0, Math.PI*2,true);
smiley.moveTo(98,55);
smiley.arc(95,55,3,0, Math.PI*2, true);
smiley.fill()

//Hair
smiley.beginPath(75,25);
smiley.moveTo(75,25);
smiley.lineTo(75,5);
smiley.moveTo(79,5);
smiley.lineTo(78,25);
smiley.moveTo(72,25);
smiley.lineTo(71,5);
smiley.stroke();

//Nose
smiley.beginPath();
smiley.moveTo(73,50);
smiley.lineTo(67,67);
smiley.lineTo(80,70);
smiley.stroke();

smiley.beginPath()
smiley.moveTo(73,50);
smiley.lineTo(63,69);
smiley.lineTo(80,70);
smiley.lineTo(67,67);
smiley.lineTo(73,50);
smiley.fill();
smiley.endPath();
}

</script>
</body>
``````

Hello you need to use Math.random() which gives a number between 0 and 1. But you need a range between 50 and canvasWidth-50 I expanded canvas width to demonstrate randomness more

``````<body onload="draw();">
<canvas id="canvas" width="450px" height="450px"></canvas>

<script type="application/javascript">
function draw() {
var canvas=document.getElementById("canvas");
var x=Math.random()*(canvas.width-100)-25; //smiley's width 100 and your initial value was +75 it needed to be 100/2=50
var y=Math.random()*(canvas.height-100)-25; //smiley's height 100 and your initial value was +75 it needed to be 100/2=50
var canvas = document.getElementById("canvas");
var smiley = canvas.getContext("2d");

//Face shape
smiley.beginPath();
smiley.arc(75+x, 75+y, 50, 0, Math.PI * 2, true);

//Right eye
smiley.moveTo(65+x,55+y);
smiley.arc(55+x,55+y,10,0, Math.PI * 2, true);

//Left eye
smiley.moveTo(105+x,55+y);
smiley.arc(95+x,55+y,10,0, Math.PI * 2, true);

//Mouth
smiley.moveTo(35+x,75+y);
smiley.arc(75+x, 75+y, 40, 0, Math.PI, false);
smiley.moveTo(36+x,81+y);
smiley.lineTo(114+x,81+y);
smiley.stroke();

//Pupils
smiley.beginPath(58+x,55+y);
smiley.moveTo(58+x,55+y);
smiley.arc(55+x,55+y,3,0, Math.PI*2,true);
smiley.moveTo(98+x,55+y);
smiley.arc(95+x,55+y,3,0, Math.PI*2, true);
smiley.fill()

//Hair
smiley.beginPath(75+x,25+y);
smiley.moveTo(75+x,25+y);
smiley.lineTo(75+x,5+y);
smiley.moveTo(79+x,5+y);
smiley.lineTo(78+x,25+y);
smiley.moveTo(72+x,25+y);
smiley.lineTo(71+x,5+y);
smiley.stroke();

//Nose
smiley.beginPath();
smiley.moveTo(73+x,50+y);
smiley.lineTo(67+x,67+y);
smiley.lineTo(80+x,70+y);
smiley.stroke();

smiley.moveTo(73+x,50+y);
smiley.lineTo(63+x,69+y);
smiley.lineTo(80+x,70+y);
smiley.lineTo(67+x,67+y);
smiley.lineTo(73+x,50+y);
smiley.fill();
}

</script>
</body>``````