Search code examples
htmlcanvasbezierpolygons

using bezier curves

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

Solution

  • 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

    1. http://www.w3.org/html/wg/drafts/2dcontext/html5_canvas/
    2. http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#the-canvas-element