Member Avatar for Stefce

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

  • 8 Contributors
  • 12 Replies
  • 3K Views
  • 8 Months Discussion Span
  • Latest Post Latest Post by anand9796
Member Avatar for Terry_10

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.

Edited by Terry_10
Member Avatar for Stefce

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

Member Avatar for Terry_10

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

Member Avatar for Stefce

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>
Member Avatar for rproffitt

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.

Member Avatar for ikoren

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

Member Avatar for Harry_25

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.

Member Avatar for Halla_1

How many people have many opinions.

Member Avatar for Purvi_1

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>
Member Avatar for anand9796

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.