JSFiddle - React, Tailwind, and code Playground

by lun471k

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.13/fabric.min.js"></script>
<svg id="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="100px" height="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<polygon points="84.83,47.288 48.83,12.037 12.83,47.288 21.844,47.288 21.844,84.037 40.647,84.037 40.647,60.693 57.17,60.693   57.17,84.037 75.817,84.037 75.817,47.288 "/>
</svg>

<input type="color" id="IR_color">
<canvas id="IR_canvas"></canvas>

JavaScript

var IRCanvas = new fabric.Canvas('IR_canvas');

var svg = document.getElementById('svg');
var serializer = new XMLSerializer();
var svgStr = serializer.serializeToString(svg);
// Loading the vector object.
fabric.loadSVGFromString(svgStr, function (objects, options) {
    //var house = fabric.util.groupSVGElements(objects,options);
    var house = fabric.util.groupSVGElements(objects, options);
    IRCanvas.setDimensions({
        width: 500,
        height: 500
    });
    house.set({
        width: 100,
        height:100,
        fill: '#000000',
        lockRotation: true,
        lockScalingFlip: true,
        lockMovementX: true,
        lockMovementY: true,
        hasRotatingPoint: false,
    });

    IRCanvas.add(house);
});

// When picking a color.
$(document.body).on('change', '#IR_color', function () {

    IRCanvas._objects[0].set({
        fill: this.value
    });
    
    IRCanvas.renderAll();
});