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

Re: What is wrong with this JS code? 80 80

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.

Re: What is wrong with this JS code? 80 80

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

Re: What is wrong with this JS code? 80 80

Start with tutorials. Here's one that draws a circle. https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_canvas_arc

PS. Added with edit. From what I see in your code you define a function but never call it. So it never happened.

Re: What is wrong with this JS code? 80 80

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

Re: What is wrong with this JS code? 80 80

@Stefan_1. Here you go. Does not do exactly what you want, but you should be able to tweak it and make it work for you.
https://jsfiddle.net/Kelowna777/z2ma9Lqg/37/

Re: What is wrong with this JS code? 80 80

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>
Re: What is wrong with this JS code? 80 80

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.

Re: What is wrong with this JS code? 80 80

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

Re: What is wrong with this JS code? 80 80

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.

Re: What is wrong with this JS code? 80 80

How many people have many opinions.

Re: What is wrong with this JS code? 80 80

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>
Re: What is wrong with this JS code? 80 80

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 1.19 million developers, IT pros, digital marketers, and technology enthusiasts learning and sharing knowledge.