using bezier curves

Question

I'm creating one custom method for my project which will create polygons. I have this:

var c2 = document.getElementById('c').getContext('2d');
c2.fillStyle = '#f00';
c2.beginPath();
c2.moveTo(10, 20);
c2.lineTo(20, 10);
c2.lineTo(60, 10);
c2.lineTo(60, 30);
c2.lineTo(20, 30);
c2.lineTo(10, 20);
c2.closePath();
c2.fill();

Live demo: http://jsfiddle.net/yd7Wv/4292/ Now, I need use bezier curves because I need rounded edges Could you help me with bezier curves, please? Best regards, Daniel

score 3 · Answer 1 · answered Feb 06 '13 at 09:33

Either use the bezierCurveTo method already implemented:

bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);

http://www.w3schools.com/tags/canvas_beziercurveto.asp

Or you can write your own bazier curve method like the one below, which has a much greater approximation:

coord = function (x,y) {
  if(!x) var x=0;
  if(!y) var y=0;
  return {x: x, y: y};
}

function B1(t) { return t*t*t }
function B2(t) { return 3*t*t*(1-t) }
function B3(t) { return 3*t*(1-t)*(1-t) }
function B4(t) { return (1-t)*(1-t)*(1-t) }

function getBezier(percent,C1,C2,C3,C4) {
  var pos = new coord();
  pos.x = C1.x*B1(percent) + C2.x*B2(percent) + C3.x*B3(percent) + C4.x*B4(percent);
  pos.y = C1.y*B1(percent) + C2.y*B2(percent) + C3.y*B3(percent) + C4.y*B4(percent);
  return pos;
}

Hi man, sorry...yes, I accepted it because after it, I obtained it...but I used stroke in order to paint a border, and I also used linejoin='round' to make the border rounded....thanks dear! — Daniel Garcia Sanchez, Feb 07 '13 at 12:59

score 1 · Accepted Answer · answered Feb 06 '13 at 09:22

1

You can draw bezier curve using

canvas_context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);

and

canvas_context.quadraticCurveTo(cpx, cpy, x, y);

these docs will help you

answered Feb 06 '13 at 09:22

Scarecrow

4,057
3
30
56

if you are satisfied with this ans then plz accept it, so that other can follow this ans without any hesitation, – Scarecrow Feb 06 '13 at 09:35

using bezier curves

2 Answers2