Fabric.js - Change Rectangle Fill
21,737
Solution 1
Fixed the problem by using basic set method of fabric:
backgroundColor.onchange = function() {
canvas.getActiveObject().set("fill", this.value);
canvas.renderAll();
};
Solution 2
tri this the easy and simple code by fabrics documentation
var activeObject = canvas.getActiveObject();
activeObject.fill = 'your color code value';
canvas.renderAll();
Author by
Kalvin Klien
Updated on November 08, 2020Comments
-
Kalvin Klien over 3 years
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" > 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; canvas.add(rect); } 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; //textArrayAdd(text); canvas.add(text); } textControl.onchange = function() { canvas.getActiveObject().setText(this.value); canvas.renderAll(); }; textColor.onchange = function() { canvas.getActiveObject().setColor(this.value); canvas.renderAll(); }; /*----This is where I change the color of the Rectangle-----*/ backgroundColor.onchange = function() { canvas.getActiveObject().fillRect( 20, 100, 100, 50 ); canvas.renderAll(); }; /*----This is where I change the color of the Rectangle-----*/ /*function textArrayAdd(obj) { textArray.push(obj); }*/ function updateControls() { textControl.value = canvas.getActiveObject().getText(); } canvas.on({ 'object:selected': updateControls, }); /*var strDataURI = canvas.toDataURL('image/png'); function saveImage() { Canvas2Image.saveAsPNG(canvas); }*/ </script> </body> </html>
Any ideas on how to change it? Thanks in advance!