CODEWITHSUNDEEP
javascripthtml5-canvasfabricjsfabricjs2
sunil
sunil

Reputation: 33

outline and border in fabricjs

I am using fabric.js for canvas shapes. but now i have to add border with outline on these shapes like below. How it is possible in fabricjs??. Or do we have any other js library to get same output?

enter image description here

I want below output:

desired image

Upvotes: 1

Views: 1834

Answers (1)

Pärt Johanson
Pärt Johanson

Reputation: 1650

Why not create a group out of two rectangles? Like so:

var canvas = this.__canvas = new fabric.StaticCanvas('c');

var rectBack = new fabric.Rect({
  width: 170,
  height: 170,
  top: 0,
  left: 0,
  fill: 'rgba(0,0,255,1.0)',
  rx: 2,
  ry: 2
});

var outerMargin = 10
var innerOutlineWidth = 4

var innerOutline = new fabric.Rect({
  width: 170 - outerMargin - innerOutlineWidth/2,
  height: 170 - outerMargin - innerOutlineWidth/2,
  top: outerMargin/2,
  left: outerMargin/2,
  stroke: 'rgba(255,255,255,1.0)',
  fill: 'rgba(0,0,0,0.0)',
  strokeWidth: innerOutlineWidth,
  rx: 10,
  ry: 10
});

var group = new fabric.Group([rectBack, innerOutline], {
  left: 0,
  top: 0,
  angle: 0
});

canvas.add(group);
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.7.0/fabric.min.js"></script>
<canvas id="c" width="200" height="200"></canvas>

Any framework you use is going to have some fundamental building blocks you have to piece together to get what you want. So I would not recommend jumping to another one.

Upvotes: 1

Related Questions