What is wrong with this JS code?

Question

Stefce 146 Posting Pro

5 Years Ago

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

draw html javascript

8 Contributors
12 Replies
3K Views
8 Months Discussion Span
Latest Post 4 Years Ago Latest Post by anand9796

All 12 Replies

rproffitt 2,580 "Nothing to see here."

5 Years Ago

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.

Edited 5 Years Ago by rproffitt because: Added PS.

rproffitt 2,580 "Nothing to see here."

5 Years Ago

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.

Reply to this topic

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.

Terry_10 0 Newbie Poster · Answer 1 · 2018-12-29T18:08:56+00:00

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.

Stefce 146 Posting Pro · Answer 2 · 2018-12-29T18:33:45+00:00

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

Terry_10 0 Newbie Poster · Answer 3 · 2018-12-29T19:50:43+00:00

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

Terry_10 0 Newbie Poster · Answer 4 · 2018-12-29T20:03:14+00:00

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

Stefce 146 Posting Pro · Answer 5 · 2018-12-30T12:14:02+00:00

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>

ikoren 0 Newbie Poster · Answer 6 · 2019-01-03T07:52:21+00:00

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

Harry_25 0 Newbie Poster · Answer 7 · 2019-01-29T11:43:06+00:00

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.

Halla_1 0 Newbie Poster · Answer 8 · 2019-02-05T10:48:00+00:00

Halla_1 0 Newbie Poster

5 Years Ago

How many people have many opinions.

Purvi_1 -12 Light Poster Banned · Answer 9 · 2019-07-25T04:23:52+00:00

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>

anand9796 -3 Light Poster Banned · Answer 10 · 2019-09-04T07:37:52+00:00

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>

What is wrong with this JS code?

Recommended Answers Collapse Answers

All 12 Replies

Recommended Answers