Am trying to draw three circles on the page but nothing shows up, anyone can tell me what is wrong here?

<body>
    <canvas id="myCircle(3)" width="60" height="60"> Your browser does not support JavaScript,
    please update it before you continue</canvas>

    <script type="text/javascript">
        function myCircle(myCircle) {
            var c = document.getElementById("myCircle");
            var ctx = c.getContext("2d");
            ctx.beginPath();
            ctx.arc(30, 30, 26, 0, 2 * Math.PI);
            ctx.stroke();
            return myCircle;
        }
    </script>
</body>

Thank you :)

Why are you trying to create an id, with the function myCircle? Also, you are trying to generate a template, You need to run some JS that loops, build up a template and then inject it into the dom. What you have here will not work in anyway. Try looking at something simple, like underscores templating functionality. This can done quickly and effectively. The learning curve is minimal. I imagine an hour and you should be good to go.

Other wise, you will need to use an array of strings, These will contain the parts of the html you want to inject into the dom. In this case, the circles. So you basically want to build some strings, but again, use an array and then use the .join("") function on the array to build one string. Then, find a wrapper dom element. Like put a div out there with an id and inject this string into it. I'm not going to write the code for you, but have told you the steps. Try it out and I'll be glad to take a look at what you come up with.

Thank you for your reply but i really have no knowledge in JS i just find those lines inside the function on the web and i just like to just create 3 cirlces out of curiousity without copying and pasing lines... Just curious nothing else. :)
If you can show me how to do it i would really appreciate it :)

@rproffitt. He calls it in the id attribute of the canvas. That being said, @Stefan_1. There are a lot of examples out there that you can easily edit and use. Try googling and then post here and we can help out.

Does the circles need to be printed one to another and not overwrite on top of the first?
I did this and the circle showed up but i dont know if 3 circles are drawed or just one.

        <canvas id="myCircle" width="60" height="60"> Your browser does not support JavaScript,
        please update it before you continue</canvas>

        <script type="text/javascript">
          function myCircle(myCircle) {
            var c = document.getElementById("myCircle");
            var ctx = c.getContext("2d");
            ctx.beginPath();
            ctx.arc(30, 30, 26, 0, 2 * Math.PI);
            ctx.stroke();
          }
          document.getElementById("myCircle").innerHTML = myCircle(3);
        </script>

Looks like one circle to me.

If you want 3 circles you have some drawcircle() function and for the myCircle() call drawcircle() 3 times with what variables you see fit to move it about.

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Draw a circle</title>
</head>
<body onload="draw();">
<canvas id="circle" width="150" height="150"></canvas>
</body>
<script type ="text/javascript"

  function draw()
  {
      var canvas = document.getElementById('circle');
       if (canvas.getContext)
           {
            var ctx = canvas.getContext('2d'); 
            var X = canvas.width / 2;
            var Y = canvas.height / 2;
             var R = 45;
             ctx.beginPath();
              ctx.arc(X, Y, R, 0, 2 * Math.PI, false);
              ctx.lineWidth = 3;
              ctx.strokeStyle = '#FF0000';
              ctx.stroke();
              }
      }

</body>
</html>
I found this example when I googled 'draw circle with javascript. You can modify and draw three circles. Need any automation?

Open the Console. Go to the screen where you are encountering the mistake. In Chrome, explore to View > Developer > JavaScript Console or More Tools > JavaScript Console or press Ctrl + Shift + J.

Distinguish the Error. The blunder comfort will open. In the event that you don't perceive any mistakes have a go at reloading the page.

How many people have many opinions.

Try below code:

<body>

<canvas id="myCanvas" width="900">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.arc(250, 75, 50, 0, 2 * Math.PI);
ctx.arc(400, 75, 50, 0, 2 * Math.PI);
ctx.stroke();

</script> 

</body>

I think the way you are calling function is not right

You should try this code

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(30, 30, 26, 0, 2 * Math.PI);
ctx.arc(70, 30, 26, 0, 2 * Math.PI);
ctx.arc(100, 30, 26, 0, 2 * Math.PI);
ctx.stroke();
</script> 

</body>
</html>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.