How can I randomize coordinates in javascript canvas?

Question

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>

Thank you for your help.

Does this answer your question? [Generating random whole numbers in JavaScript in a specific range?](https://stackoverflow.com/questions/1527803/generating-random-whole-numbers-in-javascript-in-a-specific-range) — nicholaswmin, Feb 18 '20 at 07:47

score 1 · Accepted Answer · answered Feb 18 '20 at 08:01

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>

Thank you, that explained it very well. I thought I need a whole new function that would actually substract the coordinates, but this is so much easier! But could you explain why it is ```(canvas.width-100)-25```? — newbie_javascriptishard, Feb 18 '20 at 08:08

score 0 · Answer 2 · answered Feb 18 '20 at 08:50

function getRandom(from, to) {
  return Math.floor(Math.random() * to) + from
}

function normalise(px, shift) {
  return px - 75 + shift // moving it to 0 and then shifting it to anywhere
}


function draw() {
  var canvas = document.getElementById("canvas");
  var smiley = canvas.getContext("2d");
  const [startx, starty] = [getRandom(75, 100), getRandom(75, 100)];
  console.log(startx, starty);


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

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

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

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

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

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

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

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

How can I randomize coordinates in javascript canvas?

2 Answers2