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 ...

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.