JSFiddle - React, Tailwind, and code Playground

by Cwalkdawg

JavaScript

var Functions = {
    createCanvas: function (width, height) {
        var c = $("<canvas>").attr({
            width: width,
            height: height
        }).appendTo("body")[0];
        return {
            node: c,
            ctx: c.getContext("2d"),
            die: function () {
                $(this.node).remove();
            },
            dataurl: function () {
                return this.node.toDataURL();
            },
            clear: function () {
                this.ctx.clearRect(0, 0, width, height);
                return this;
            },
            line: function (obj) {
                var ctx = this.ctx;
                ctx.beginPath();
                ctx.save();
                ctx.moveTo(obj.x, obj.y);
                ctx.lineTo(obj.a, obj.b);
                ctx.lineWidth = (obj.width || 1);
                ctx.strokeStyle = (obj.color || "black");
                ctx.stroke();
                ctx.restore();
                return this;
            },
            text: function (obj) {
                var ctx = this.ctx;
                ctx.save();
                ctx.moveTo(obj.x, obj.y);
                ctx.font = (obj.size || 16) + "px " + (obj.font || "Arial");
                ctx.fillStyle = obj.color;
                ctx.fillText(obj.text, obj.x, obj.y);
                ctx.restore();
                return this;
            }
        };
    }
}

Functions.createCanvas(100, 100).line({
    x: 10,
    y: 0.5,
    a: 90,
    b: 0.5,
    color: "blue",
}).line({
    x: 10,
    y: 2.5,
    a: 90,
    b: 2.5,
    color: "red",
});