JSFiddle - React, Tailwind, and code Playground

by mvprzy

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.8/fabric.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div class="container">
    <div id="form-wrapper">
        <form id="myForm" name="myForm">
            <input type="button" value="Load Rect" id="buttonRect" name="buttonRect">
            <input type="button" value="Load Circle" id="buttonCir">
            <input type="button" value="Load Image" id="buttonImg">
            <input type="button" value="Load Text" id="buttonText">
        </form>
    </div>
    <div id="canvas-wrapper">
        <div class="canvas-container">
            <canvas id="myCanvas" width="500" height="500" style="border:1px solid #ccc"></canvas>
        </div>
    </div>
</div>

JavaScript

$(document).ready(function () {

    var canvas = new fabric.Canvas('myCanvas');

    function loadText() {
        // Load text
        var textVar = "New Text here";
        var textObj = new fabric.IText(textVar, {
            fontFamily: 'Times Roman',
            left: 100,
            top: 100,
            fontSize: 18,
            textAlign: "left",
            fill: "#FF0000" // Set text color to red
        });
        canvas.add(textObj);
        canvas.renderAll().bind(canvas);
    }
    $("#myForm").on("click", "#buttonText", loadText);

    // Load rectangle
    function loadRect() {
        var rect = new fabric.Rect({
            top: 100,
            left: 100,
            width: 60,
            height: 70,
            fill: 'red'
        });
        canvas.add(rect);
        canvas.renderAll().bind(canvas);
    }
    $("#myForm").on("click", "#buttonRect", loadRect);


    function loadImage() {
        // Load jpg image
        fabric.Image.fromURL('img/image200x200.jpg', function (img) {
            img.set({
                width: 75,
                height: 75,
                borderColor: 'white',
                borderScaleFactor: .07,
                cornerColor: 'green',
                cornersize: 10,
                left: 250,
                top: 175
            });
            canvas.add(img);
            canvas.renderAll.bind(canvas);
            canvas.bringToFront(img);
        });
    }
    $("#myForm").on("click", "#buttonImg", loadImage);


    function loadCircle() {
        // Load circle
        var cirObj = new fabric.Circle({
            radius: 30,
            fill: '#f55',
            top: 100,
            left: 100
        });
        canvas.add(cirObj);
        canvas.renderAll().bind(canvas);
    }
    $("#myForm").on("click", "#buttonCir", loadCircle);

});