Some HTML5 canvas javascript fun with circles and trigonometry
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


A collection of javascript classes that can be used to demonstrate simple trigonometry and circle maths.

To see the demos in action simply pull the repository and open default.html in a browser that supports html canvas. This page is a cut down version of the blog post that this library is based on.


Utilities.js - functions

  • toRad() and toDegrees() conversions
  • requestAnimationFrame shim for browser support

ImageLoader.js - class

  • A small wrapper for the creation of multiple image elements and firing a single callback after all have loaded

      new ImageLoader(["path1.jpg", "path2.jpg"])

Animator.js - class

  • A small wrapper for creating animations that respond to regular interval callbacks

      var myCanvas = document.getElementById('myCanvas');
      var myContext = myCanvas.getContext('2d');
      var desiredFramesPerSecond = 60;
      new Animator.Animation(desiredFramesPerSecond, 
              myContext.clearRect(0, 0, myCanvas.width, myCanvas.height);
              // Drawing code here

Circle.js - classes

  • Point

      var pointA = new CircleJS.Point(x, y, z);
      var pointB = new CircleJS.Point(x, y, z);
      // Z is only simply implemented and not used as part of distance or angle
      // which are x/y only
      var distance = pointA.distance(pointB);
      var angle = pointA.angle(pointB);
  • Triangle

      var triangleA = new CircleJS.Triangle(pointA, pointB, pointC)
  • Circle

      var centreX = 100;
      var centreY = 100;
      var radius = 50;
      var rotationAboutX = 0;
      var circleA = new CircleJS.Circle(centreX, centreY, radius, rotationAboutX);
  • Demo

    • The demo class provides a series of functions to draw trigonometry based circle demos to a passed canvas

             var myCanvas = document.getElementById('myCanvas');
             var myContext = myCanvas.getContext('2d');
             var demo = new CircleJS.Demo(myContext, myCanvas.width, myCanvas.height);
             // Available Demos
             demo.drawTrig(); // Draws a sohcahtoa diagram
         	demo.drawRightAngledTriangle(triangle); // draws a right angled triangle
             demo.drawCircleInfo(circle, displayAngle);  // draws a circle with a right angle triangle at the specified angle
             demo.drawTiltDemo(circle, rotation); // draws a demonstration of tilting a circle 'into' the screen
             demo.drawCarousel(circle, images, rotation, yAdjustmentFunc); // draws a rotated image carousel
             demo.drawWheel(circle, numberOfPoints, rotation, yAdjustmentFunc);  // draws a wheel (points from the centre out) with the specified spoke count
             demo.drawPolygon(circle, numberOfPoints, rotation); // draws a polygon of the specified size and number of points
    • All of these demos can be wrapped in calls to new Animator.Animation(60, callback) to animate them progressively over time