CODEWITHSUNDEEP
canvasfabricjs
Sanjay Nakate
Sanjay Nakate

Reputation: 2098

Issue with oval thicker border stroke at curve point

I am using fabricjs here i have an option CUSTOM DECAL to draw shape on on canvas.I am getting issue with the oval shape when i stroke or increase the border width of OVAL shape at the curve point of OVAL shape it's showing border width double compare than up and bottom side of OVAL.

Code sample i have used to stroke oval border

//*****************scale oval canvas border width*******************

var ovalstrokewidth=0;
$("#ovalstrokewidth").change(function() {
var otrokew=(this.value);
$(".width_val_oval").html(otrokew);
ovalstrokewidth= parseInt(otrokew);
ovalcval=(this.value);
var w;
var h;
var ctx = canvas.getContext('2d');
canvas.clipTo = function(ctx) {
w=canvas.width / 4;
h=canvas.height / 2.4;
ctx.save();
ctx.scale(2, 1.2);
ctx.arc(w, h,ovalcrad , 0, 2 * Math.PI, true);

$("#decal_color").css('display', 'block');

//ctx.fillStyle = "#555";
ctx.fillStyle =decal_border_colour_oval;
ctx.strokeStyle = ctx.fillStyle;
//ctx.lineWidth = 1.5;
ctx.lineWidth = ovalstrokewidth;
ctx.stroke();
ctx.restore();

};
canvas.renderAll();
});

//-----------------End scale oval canvas border width------------

snap shot image

Site Link

  1. Click on Decal Shape
  2. Choose OVAL option
  3. Increase border width

Upvotes: 0

Views: 258

Answers (1)

markE
markE

Reputation: 105015

The deformation of your line is due to ctx.scale(2,1.2) which also scales the linewidth.

Instead, you can draw an ellipse using its math formula (no scaling required).

This way your lines are not deformed.

A Demo: http://jsfiddle.net/m1erickson/2s7pH/

drawEllipse(150,150,2,1.2,50);


function drawEllipse(cx,cy,ratioWidth,ratioHeight,radius){
    var PI2=Math.PI*2;
    var increment=PI2/100;
    var ratio=ratioHeight/ratioWidth;

    ctx.beginPath();
    var x = cx + radius * Math.cos(0);
    var y = cy - ratio * radius * Math.sin(0);
    ctx.lineTo(x,y);

    for(var radians=increment; radians<PI2; radians+=increment){ 
        var x = cx + radius * Math.cos(radians);
        var y = cy - ratio * radius * Math.sin(radians);
        ctx.lineTo(x,y);
     }

    ctx.closePath();
    ctx.stroke();
}

Upvotes: 2

Related Questions