JSFiddle - React, Tailwind, and code Playground

by leiperte

HTML

<!--Assignment 5 Drawing on the Canvas-->
<html>
  <center>
    <h1>
      <b>Spirograph</b>
    </h1>
  </center>

  <head>
    <center><button onclick="doDrawing();">Start Drawing</button>
      <button onclick="stopDrawing();">Stop Drawing</button>
    </center>
  </head>

  <body>
    <center>
      <canvas id="myCanvas" width="400" height="400" style="border:5px solid #000000;">
      </canvas>
      <script type="text/javascript">
        var t = 0;
        var c = document.getElementById("myCanvas");
        var ctx = c.getContext("2d");
        var r = 45;
        var O = 15;
        var w = c.width / 2;
        var R = w / 2;

        function doDrawing() {
          t = 0;


          // Clear the Canvas
          ctx.clear();

          // Create a random color
          var timesRun = 0;
          var color = '#' + Math.floor(Math.random() * 16777215).toString(16);

          // Initial x and y
          var x = w+(R + r) * Math.cos(t) - (r + O) * Math.cos(((R + r) / r) * t);
          var y = w+(R + r) * Math.sin(t) - (r + O) * Math.sin(((R + r) / r) * t);

          // Start the Drawing
          ctx.beginPath();
          ctx.strokeStyle = color;
          ctx.moveTo(x, y);

          //Use the timer to create drawing
          var interval = setInterval(function() {
            timesRun += 1;
            if (timesRun === 1000) {
              clearInterval(interval);
            }

            drawSpirograph();
          }, 5);

        }

        function drawSpirograph() {
          t += 0.1;
          x = w+(R + r) * Math.cos(t) - (r + O) * Math.cos(((R + r) / r) * t);
          y = w+(R + r) * Math.sin(t) - (r + O) * Math.sin(((R + r) / r) * t);

          ctx.lineTo(x, y);
          ctx.stroke();
        }

        CanvasRenderingContext2D.prototype.clear =
          CanvasRenderingContext2D.prototype.clear || function(preserveTransform) {
            if (preserveTransform) {
              this.save();
              this.setTransform(1, 0, 0,...