JSFiddle - React, Tailwind, and code Playground

by Zhitao Gong

HTML

<canvas id="logo-full" width="700" height="380"></canvas>

JavaScript

// Time-stamp: <2012-10-05 11:59:39 gongzhitaao>

(function ($) {

    $(document).ready(function() {
        logo_full();
    });

    function logo_full() {
        var cvs = $('#logo-full')[0];                        
        var ctx = cvs.getContext('2d');
        var s = 8;
        
        var w = cvs.width;
        var h = cvs.height;
        ctx.beginPath();
        ctx.strokeRect(0, 0, w, h);
        ctx.stroke();

        ctx.lineWidth = 6;
        ctx.lineJoin = 'round';
        ctx.lineCap = 'round';

        ctx.translate(5*s, 12*s);
        ctx.beginPath();
        // C
        ctx.moveTo(12*s, 0);
        ctx.bezierCurveTo(0, 0, 0, 4*s, 0, 11*s);
        ctx.bezierCurveTo(0, 16*s, 0, 16*s, 12*s, 16*s);
        // o
        var r = 8;
        ctx.translate(14*s, 10*s);
        ctx.moveTo(r, 0);
        ctx.arcTo(5*s, 0, 5*s, 6*s, r);
        ctx.arcTo(5*s, 6*s, 0, 6*s, r);
        ctx.arcTo(0, 6*s, 0, 0, r);
        ctx.arcTo(0, 0, 5*s, 0, r);
        // d
        ctx.translate(7*s, -3*s);
        ctx.moveTo(5*s, 3*s);
        ctx.bezierCurveTo(0, 3*s, 0, 3*s, 0, 7*s);
        ctx.bezierCurveTo(0, 9*s, 0, 9*s, 3*s, 9*s);
        ctx.bezierCurveTo(5*s, 9*s, 5*s, 9*s, 5*s, 0);
        // i
        ctx.translate(7*s, 0);
        ctx.moveTo(1.5*s, 3*s);
        ctx.lineTo(1.5*s, 9*s);
        ctx.stroke();

        ctx.save();
        ctx.beginPath();
        ctx.moveTo(0, 0);
        ctx.lineWidth = 2;
        ctx.fillStyle = "rgb(0, 255, 0)";
        ctx.strokeStyle = "rgb(0, 255, 0)";
        ctx.bezierCurveTo(0, 1.5*s, 0, 1.5*s, 1.5*s, 1.5*s);
        ctx.bezierCurveTo(1.5*s, 0, 1.5*s, 0, 0, 0);
        ctx.fill();
        ctx.restore();

        ctx.beginPath();
        // n
        ctx.translate(4*s, 3*s);
        ctx.moveTo(0, 6*s);
        ctx.bezierCurveTo(0, 0, 0, 0, 2*s, 0);
        ctx.bezierCurveTo(5*s, 0, 5*s, 0, 5*s, 6*s);
        // g
        ctx.translate(7*s, 0);
        ctx.moveTo(5*s, 0);
        ctx.bezierCurveTo(0, 0, 0, 0, 0,...