Canvas In Different Shapes With Fabricjs Plugin
I am trying to set canvas shape to circle and any other on click of button . but normal clip is not working with fabricjs . can you please share simple canvas shape example for my
Solution 1:
Try this hope will help you.
<select name="Decal Shape" id="decalshap"class="hasClass" style="height:30px;">
<option > Select Shape </option><optionvalue="oval"> OVAL </option><optionvalue="circle"> CIRCLE </option><optionvalue="rectangle">RECTANGLE</option><optionvalue="hrectangle"> HORIZONTAL RECTANGLE </option><optionvalue="vrectangle"> VERTICAL RECTANGLE </option>
</select>
<divid="work_area"></div>
$("#decalshap").change(function() {
alert("decal");
var shap = $(this).val();
if(shap=="oval")
{
var elementID = 'canvas' + $('canvas').length;
$('<canvas>').attr({
id: elementID
}).css({
width:1200,
height:600
}).appendTo('#work_area');
var canvas = document.getElementById(elementID);
var ctx = canvas.getContext('2d');
// ctx.fillStyle='rgba(70, 70, 255, 0.7)'// ctx.fillRect(20,20,150,100);var centerX = 0;
var centerY = 0;
var radius = 50;
ctx.save();
ctx.translate(canvas.width / 2, canvas.height / 2);
ctx.scale(2, 1);
ctx.beginPath();
ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
ctx.restore();
ctx.fillStyle = '#8ED6FF';
ctx.fill();
ctx.lineWidth = 5;
ctx.strokeStyle = 'black';
ctx.stroke();
ctx.beginPath();
ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
}
if(shap=="circle")
{
var elementID = 'canvas' + $('canvas').length;
$('<canvas>').attr({
id: elementID
}).css({
width:1200,
height:600
}).appendTo('#work_area');
var canvas = document.getElementById(elementID);
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(100,75,50,0,2*Math.PI);
ctx.stroke();
}
if(shap=="hrectangle")
{
var elementID = 'canvas' + $('canvas').length;
$('<canvas>').attr({
id: elementID
}).css({
width:1200,
height:300
}).appendTo('#work_area');
var canvas = document.getElementById(elementID);
var ctx = canvas.getContext('2d');
ctx.fillStyle='border: 1px dotted';
ctx.fillRect(0,0,200,400);
}
if(shap=="vrectangle")
{
var elementID = 'canvas' + $('canvas').length;
$('<canvas>').attr({
id: elementID
}).css({
width:300,
height:600
}).appendTo('#work_area');
var canvas = document.getElementById(elementID);
var ctx = canvas.getContext('2d');
ctx.fillStyle='border: 1px dotted';
ctx.fillRect(0,0,400,200);
}
});
Solution 2:
try this script to convert your Canvas in circle shapes with fabricjs.You can clip your canvas to any shape using clipTo
function as i clip my canvas in circle shape
//html
<canvas id="c" width="400" height="300"></canvas>
//script
var canvas = new fabric.Canvas('c');
canvas.backgroundColor = 'red';
var w=canvas.width / 2;
var h=canvas.height / 2;
canvas.clipTo = function(ctx) {
//ctx.scale(2, 1);
ctx.arc(w, h, 150, 0, Math.PI * 2,true);
};
canvas.renderAll();
var text;
text = new fabric.Text('Honey', {
fontSize: 50,
left: 100,
top: 100,
lineHeight: 1,
originX: 'left',
fontFamily: 'Helvetica',
fontWeight: 'bold'
});
canvas.add(text);
//css
canvas { border:1px solid #000; }
.controles { margin:50px0; }
Here is my fiddle demo hope it will help you.
Post a Comment for "Canvas In Different Shapes With Fabricjs Plugin"