Fraction Visualizer With jQuery And HTML5 Canvas - FractionPainter

A Fraction is a part of a whole (just as a half is a part of a whole). Fractions can be added, subtracted, multiplied and divided. This plugin helps to understand this math concept.

FractionPainter is a lightweight jQuery based Fraction Visualizer that draws a picture of the fraction as filled circles, just like a pie chart. It can be useful for teachers to let their students understand the meaning of Fraction.

How to use it:

1. Download and load the jquery.fractionpainter.js script after jQuery.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/jquery.fractionpainter.js"></script>

2. Create a container to hold the canvas.

<div id="example"></div>

3. Initialize the Fraction Visualizer and specify the numerator & denominator. That's it.

jQuery(document).ready(function(){ 
  $("#example").fractionPainter({
    numerator: 1, 
    denominator: 3,
  });
});

4. Set the width & height of the canvas.

jQuery(document).ready(function(){ 
  $("#example").fractionPainter({
    numerator: 1, 
    denominator: 3,
    width: 800, 
    height: 450,
  });
});

5. Customize the fill & stroke colors in the JavaScript.

var _fillColor = "red";
var _fillInactiveColor = "#ececec";
var _strokeColor = "#333333";

---

This awesome jQuery plugin is developed by yesidpol. For more Advanced Usages, please check the demo page or visit the official website.