Fraction Visualizer With jQuery And HTML5 Canvas - FractionPainter
File Size: | 5.32 KB |
---|---|
Views Total: | 419 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.