JSFiddle - React, Tailwind, and code Playground
HTML
<canvas id="c" width="400" height="400"></canvas>
<button id="changestroke">clickme</button>
JavaScript
// canvas
var canvas = new fabric.Canvas('c');
canvas.backgroundColor = "green";
var DashrectH = new fabric.Rect({
fill: 'blue',
width: canvas.width,
height: 45,
stroke: 'red',
strokeWidth:3,
top:canvas.height-50,
strokeDashArray: [20, 20],
});
DashrectH.id='DashrectH';
canvas.add(DashrectH);
function actionoobjectByid(Idofobject){
var objArrayAll = canvas.getObjects();
for (var j = 0; j < objArrayAll.length; j++) {
if((objArrayAll[j].id ==Idofobject)){
return objArrayAll[j];
}
}
}
document.getElementById('changestroke').onclick = function() {
var DashrectH=actionoobjectByid('DashrectH');
//DashrectH.set('stroke', 'yellow');
DashrectH.set('strokeDashArray', [10,10]);
canvas.renderAll();
};
canvas.renderAll();