Ad

How Can I Randomize Coordinates In Javascript Canvas?

- 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>

Thank you for your help.

Ad

Answer

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>

Ad
source: stackoverflow.com
Ad