CODEWITHSUNDEEP
javascripthtmlcanvas
Frazer
Frazer

Reputation: 5

Cannot get HTML/Javascript page to draw fraction using Canvas tag

I am trying to get the following single HTML5 page with embedded Javascript to draw a fraction of a circle dependent upon the numerator and dominator chosen.

The code was suggested by @Vanojx1 but, my post was closed because it was not 'specific' enough, and, I just want some help understanding what I am doing wrong please: 

<!DOCTYPE html>
<html lang="">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="author" content="">
    <meta name="description" content="Fraction Learning app for Children">
    <script type="text/javascript">
        var c = document.getElementById("myCanvas");
        var ctx = c.getContext("2d");
        var pi = Math.PI;


        document.getElementById("draw").addEventListener("click", function () {
            var num = document.getElementById("num").value;
            var den = document.getElementById("den").value;
            var rad = 2 / den * num * pi;
            var cx = 250;
            var cy = 250;

            ctx.clearRect(0, 0, 500, 500);
            ctx.beginPath();
            ctx.moveTo(cx, cy);

            ctx.arc(cx, cy, 220, 1.5 * pi, 1.5 * pi + rad);

            ctx.lineTo(cx, cy);
            ctx.fillStyle = "#FF0000";
            ctx.fill();
            ctx.closePath();
            ctx.stroke();

        });
    </script>
    <title>Fractions Fun</title>
</head>

<body>

<canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3;">
    Your browser does not support the HTML5 canvas tag.</canvas>
<br>
<input type="number" id="num" /> /
<input type="number" id="den" />
<br>
<button id="draw">
    DRAW
</button>


</body>

</html>

Upvotes: 0

Views: 601

Answers (1)

John C
John C

Reputation: 3112

HTML is rendered in the order that it appears in the DOM (that includes script blocks). Therefore the script block will be run before draw is rendered. As draw does not exist the script fails to add the click handler.

Putting the code in a function and call it using the body's onload event would allow the click handler to be added. See below -

<!DOCTYPE html>
<html lang="">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="author" content="">
  <meta name="description" content="Fraction Learning app for Children">
  <script type="text/javascript">
    function init() {
      var c = document.getElementById("myCanvas");
      var ctx = c.getContext("2d");
      var pi = Math.PI;
      document.getElementById("draw").addEventListener("click", function() {
        var num = document.getElementById("num").value;
        var den = document.getElementById("den").value;
        var rad = 2 / den * num * pi;
        var cx = 250;
        var cy = 250;

        ctx.clearRect(0, 0, 500, 500);
        ctx.beginPath();
        ctx.moveTo(cx, cy);

        ctx.arc(cx, cy, 220, 1.5 * pi, 1.5 * pi + rad);

        ctx.lineTo(cx, cy);
        ctx.fillStyle = "#FF0000";
        ctx.fill();
        ctx.closePath();
        ctx.stroke();

      });
    }
  </script>
  <title>Fractions Fun</title>
</head>

<body onload="init()">
  <canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3;">
    Your browser does not support the HTML5 canvas tag.</canvas>
  <br>
  <input type="number" id="num" />/
  <input type="number" id="den" />
  <br>
  <button id="draw">
    DRAW
  </button>
</body>

Another method I've seen used is to put the script tag at the end of the document (although I'm not sure if it's considered best practice and I don't use it myself) -

<!DOCTYPE html>
<html lang="">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="author" content="">
  <meta name="description" content="Fraction Learning app for Children">

  <title>Fractions Fun</title>
</head>

<body>
  <canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3;">
    Your browser does not support the HTML5 canvas tag.</canvas>
  <br>
  <input type="number" id="num" />/
  <input type="number" id="den" />
  <br>
  <button id="draw">
    DRAW
  </button>
  <script type="text/javascript">
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    var pi = Math.PI;
    document.getElementById("draw").addEventListener("click", function() {
      var num = document.getElementById("num").value;
      var den = document.getElementById("den").value;
      var rad = 2 / den * num * pi;
      var cx = 250;
      var cy = 250;

      ctx.clearRect(0, 0, 500, 500);
      ctx.beginPath();
      ctx.moveTo(cx, cy);

      ctx.arc(cx, cy, 220, 1.5 * pi, 1.5 * pi + rad);

      ctx.lineTo(cx, cy);
      ctx.fillStyle = "#FF0000";
      ctx.fill();
      ctx.closePath();
      ctx.stroke();

    });
  </script>
</body>

Upvotes: 1

Related Questions