Fabric.js - Change Rectangle Fill

Hey guys I'm working on a application that uses Fabric.js.

Fabric.js API: http://fabricjs.com/docs/symbols/fabric.Object.html

I need to be able to change the fill of the rectangle that I put up as background.

I use canvas.getActiveObject() to change the fill of the rectangle. Unfortunately I cant seem to find a method that will change the Fill of the rectangle.

Here is my code:

    <title>Text Rendering Example</title>
    <script src="fabric.js"></script>  
    <script src="canvas2image.js"></script>
    <script src="base64.js"></script>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"

    <canvas id="canvas" width="1000" height="600" style="border:1px solid #000000"></canvas>

    <form name = "boxForm" onsubmit="addBox()">
        Width: <input type="text" name="firstname" /><br />
        Text: <input id="text-control" type="text" name="textString" />
        Text Color: <input id="text-color" type="text" value = "#FF0000" name="textColor" />
        Background Color: <input id="background-color" type="text" value = "#333333" name="backgroundColor" />

    <button onclick="addBox()">Background</button>

    <button onclick="addText()">Add Text</button>

    <!--button onclick="updateControls()">Edit Text</button-->

    <button onclick="saveImage()">File</button>

    <script type="text/javascript" >

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

        var $ = function(id){return document.getElementById(id)};

        var textArray = new Array();

        var textControl = $('text-control');        
        var textColor = $('text-color');
        var backgroundColor = $('background-color');

        function addBox()
            var rect = new fabric.Rect({
            width: 1000,
            height: 600,
            top: 300,
            left: 500,
            fill: 'rgba(51,51,51,1)',
            draggable: false
            rect.lockMovementX = true;
            rect.lockMovementY = true; 
            rect.lockUniScaling = true; 
            rect.lockRotation = true; 


        function addText()
            var content = document.boxForm.textString.value;
            var color = document.boxForm.textColor.value;

            text = new fabric.Text(content, {               
                left: 100, 
                top: 100,
                fill: color
            text.lockUniScaling = true; 
            text.lockRotation = true;



        textControl.onchange = function() {

        textColor.onchange = function() {

        /*----This is where I change the color of the Rectangle-----*/

        backgroundColor.onchange = function() {         
            canvas.getActiveObject().fillRect( 20, 100, 100, 50 );

        /*----This is where I change the color of the Rectangle-----*/

        /*function textArrayAdd(obj)

        function updateControls() {         
            textControl.value = canvas.getActiveObject().getText();

            'object:selected': updateControls,

        /*var strDataURI = canvas.toDataURL('image/png'); 

        function saveImage()



Any ideas on how to change it? Thanks in advance!


Fixed the problem by using basic set method of fabric:

backgroundColor.onchange = function() {         
            canvas.getActiveObject().set("fill", this.value);

Need Your Help

How should I copy objects between two KiokuDB dirs?

perl serialization moose kiokudb

I would like to make sure I get KiokuDB's scope concept correctly.

Visual Basic Shift Cipher

vb.net encryption modulo shift

I have a problem with my Ceasar shift cipher program. The code works fine when i have to encrypt some text with n shift ciphers. But when i want to decrypt some text, the array index goes negative ...