JSFiddle - React, Tailwind, and code Playground

by robreact

HTML

<canvas id="ctx" width="500" height="500"></canvas>

JavaScript

/**
 * @license Canvas JavaScript Library v0.1
 * some day:
 * canvasjs.net
 * for now, visit:
 *
 * http://htmlcssjavascript.com
 *
 * Copyright 2011, Rob Larsen
 *
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://bobholtwebdev.com/license
 *
 * Date: 2011.12.1
 */

/**
* @todo animations - https://developer.mozilla.org/en/Canvas_tutorial/Basic_animations
* @todo Manage current position better. We're fuzzy on what x,y actually means. It's easy enough to give options, we just need to come up with a default.
* For starters, ADD boundingBox property for shapes, which we can then expose as whatever current X,Y scheme we'd default to and then then whatever people want
* then set up a configruation piece. Set default position when the Canvas is created and then allow overrides at any point.
* Something like ctx.setOrigin ( args )
* @todo DOCUMENTATION
* @todo BUILD SCRIPT
*/

(function(window) {
    "use strict";
    var document = window.document;
    var Canvas = (function() {

        // Define a local copy of Canvas
        var Canvas = function( selector , params ) {
            return new Canvas.prototype._init( selector );
        };

        Canvas.prototype = {

/**
 * Creates a new Canvas object
 *  @name CanvasJS
 *  @function
 *  @constructor
 *  @param  {string} selector a string indicating the id of an HTML Canvas element or the name of the Canvas Element to be createed
 *  @param {object} params An object containing the following paramters
 *  @param  {string} params.fillStyle - default fill style. Defaults to "#000000";
 *  @param  {string} params.font - default font. Defaults to "10px sans-serif";
 *  @param  {string} params.globalAlpha - default alpha. Defaults to 1;
 *  @param  {string} params.globalCompositeOperation - Default global composition operation. Defaults to "source-over";
 *  @param  {string} params.lineCap - Default line cap. Defaults to "butt";
 *  @param  {string} params.lineJoin - Default line join. Defaults to...