Alex Rivera | Logout

Fabric.js - Change Rectangle Fill

Asked 2012-09-10T17:17:02.067
11

I am working on a application that uses Fabric.js.

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:

<html>
  <head>
    <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"
    
  </head>
  <body>
    <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" />
    </form> 
    
    <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" &g
Edit
Report

1 Answer

33

Fixed the problem by using basic set method of fabric:

backgroundColor.onchange = function() {         
    canvas.getActiveObject().set("fill", this.value);
    canvas.renderAll();
};
answered 2012-09-10T18:47:48.243

Your Answer