JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://jp.igniteui.com/js/modernizr.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
<script src="https://jp.igniteui.com/js/apiviewer.js"></script>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>
<link href="https://jp.igniteui.com/css/apiviewer.css" rel="stylesheet" type="text/css"></link>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/i18n/infragistics-ja.js"></script>

<table>
        <tr>
            <td>
                <div class="manipulator-container">
                    <div id="split-button-shape"></div><span> - 図形の変更</span><br /><br />
                    <div id="color-picker-shape"></div><span> - 色の変更</span><br /><br />
                    <div id="text-align-button"></div><span> - テキスト配置の変更</span><br /><br />
                    <div id="text-style-button"></div><span> - テキスト スタイルの変更</span><br /><br />
                    <div id="font-color-picker"></div><span> - フォント色の変更</span><br /><br />
                    <div id="background-color-picker"></div><span> - 背景色の変更</span><br /><br />
                </div>
            </td>
            <td>
                <canvas id="shape-renderer"></canvas>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <div class="text-container">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea...

CSS

.ui-button {
            width: 18px;
            height: 18px;
            padding: 3px;
        }

        .ui-igbutton .ui-igbutton-forecolor, .button-split {
            background-image: url('https://jp.igniteui.com/igniteui/css/themes/infragistics/images/ui-icons_888888_256x240.png')!important;
            background-size: 384px 370px;
        }

        #color-picker-shape .ui-igbutton .ui-igbutton-forecolor, .button-circle.ui-icon {
            background-position: -123px -230px;
            background-image: url('https://jp.igniteui.com/igniteui/css/themes/infragistics/images/ui-icons_888888_256x240.png')!important;        }

        #font-color-picker .ui-igbutton .ui-igbutton-forecolor {
            background-position: 0 -448px;
            background-image: url('https://jp.igniteui.com/igniteui/css/themes/metro/images/igHtmlEditor/html-editor-sprite.png')!important;
            background-size: auto;
        }

        #background-color-picker .ui-igbutton .ui-igbutton-backcolor {
            background-position: 0 -464px;
            background-image: url('https://jp.igniteui.com/igniteui/css/themes/metro/images/igHtmlEditor/html-editor-sprite.png')!important;
            background-size: auto;
        }

        #text-align-button .ui-btn-justifyleft {
            background-image: url('https://jp.igniteui.com/igniteui/css/themes/metro/images/igHtmlEditor/html-editor-sprite.png')!important;
            background-position: 0 -384px;
        }

        #text-align-button .ui-btn-justifycenter {
            background-image: url('https://jp.igniteui.com/igniteui/css/themes/metro/images/igHtmlEditor/html-editor-sprite.png')!important;
            background-position: 0 -400px;
        }

        #text-align-button .ui-btn-justifyright {
            background-image: url('https://jp.igniteui.com/igniteui/css/themes/metro/images/igHtmlEditor/html-editor-sprite.png')!important;
            background-position: 0 -416px;
        }

       ...

JavaScript

$(function () {
            var DEFAULT_COLOR = "#205867",
                canvas = document.getElementById("shape-renderer"),
                context = canvas.getContext("2d");

            $("#split-button-shape").igSplitButton({
                items: [{
                    name: "circle",
                    label: "circle",
                    iconClass: "button-split button-circle"
                }, {
                    name: "triangle",
                    label: "triangle",
                    iconClass: "button-triangle"
                },
                {
                    name: "square",
                    label: "square",
                    iconClass: "button-split button-square"
                }],
                defaultItemName: "circle",
                swapDefaultEnabled: true,
                click: function (event) {
                    var shapeType = event.target.firstChild.id.split("_")[1];
                    changeShape(shapeType);
                }
            });

            function changeShape(shapeType) {
                switch (shapeType) {
                    case "circle":
                        drawCircle();
                        break;
                    case "triangle":
                        drawTriangle();
                        break;
                    case "square":
                        drawSquare();
                        break;
                }
            }

            function drawCircle() {
                var previousFillStyle = context.fillStyle;

                context.clearRect(0, 0, canvas.width, canvas.height);
                context.beginPath();
                context.arc(90, 78, 70, 0, 2 * Math.PI);
                context.stroke();
                context.fillStyle = previousFillStyle;
                context.fill();
            }

            function drawTriangle() {
                var previousFillStyle = context.fillStyle;

                context.clearRect(0, 0, canvas.width,...