Course notes 18
syllabus | schedule | exercises | assignments | class notes | resources | students | ARTC courses

Bezier Curves and Line Attributes

Bézier curve uses two control points. Only the end point and control points associated with the end points are specified. It will start at the previous moveTo or lineTo or bezierCurveTo.

Usage: bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

bezier

The x and y parameters are the coordinates of the end point. cp1x and cp1y are the coordinates of the first control point, and cp2x and cp2y are the coordinates of the end control point.

Using Bezier Curve Example:

      var canvas = document.getElementById('ex01');
      var ctx = canvas.getContext('2d');
      
      ctx.beginPath();
      
      ctx.bezierCurveTo(70,70,121,70,170,70);
      ctx.bezierCurveTo(39,200,185,200,113,200);
      ctx.bezierCurveTo(160,243,217,265,193,255);
      ctx.bezierCurveTo(150,195,224,80,285,171);
      ctx.bezierCurveTo(220,185,200,181,166,181);
      ctx.bezierCurveTo(118,240,144,112,132,133);
      ctx.bezierCurveTo(270,170,121,70,170,70);
      
      ctx.stroke();	


Two Bezier Curves with moveTo

      var canvas = document.getElementById('ex02');
      var ctx = canvas.getContext('2d');
      
      ctx.beginPath();
      moveTo(100,100);
      ctx.bezierCurveTo(70,70,121,70,200,150);
      ctx.bezierCurveTo(160,243,90,100,193,255);
      ctx.fill();
	  
      ctx.beginPath();
      moveTo(20,20);
      ctx.bezierCurveTo(100,70,121,70,100,20);
      ctx.bezierCurveTo(160,243,90,100,250,50);
      ctx.stroke();		


Line Attributes

lineWidth = value - 1, 2, 3, ...

lineCap = butt, round or square (default = butt)

The square attribute extends the length of the ends of the line.

Example with attributes:

      var canvas = document.getElementById('ex03');
      var ctx = canvas.getContext('2d');
      
      ctx.beginPath();
      ctx.lineCap = "butt";
      ctx.strokeStyle = "#F00";
      ctx.lineWidth = 10;
      ctx.moveTo(30,100);
      ctx.lineTo(50,180);
      ctx.lineTo(60,150);
      ctx.lineTo(70,180);
      ctx.lineTo(90,100);
      ctx.stroke();  

      ctx.beginPath();
      ctx.lineCap = "square";
      ctx.strokeStyle = "#F00";
      ctx.lineWidth = 10;
      ctx.moveTo(120,100);
      ctx.lineTo(140,180);
      ctx.lineTo(150,150);
      ctx.lineTo(160,180);
      ctx.lineTo(180,100);
      ctx.stroke();  

      ctx.beginPath();
      ctx.lineCap = "round";
      ctx.strokeStyle = "#F00";
      ctx.lineWidth = 10;
      ctx.moveTo(200,100);
      ctx.lineTo(220,180);
      ctx.lineTo(230,150);
      ctx.lineTo(240,180);
      ctx.lineTo(260,100);
      ctx.stroke();  

	


lineJoin and miterLimit example:

lineJoin = round, bevel or miter (default = miter)

miterLimit = value

The miterLimit will chop off the line point when the angle extends the line too far.

See example: Click here

      ctx.beginPath();
      ctx.lineJoin = "bevel";
      ctx.strokeStyle = "#F00";
      ctx.lineWidth = 10;
      ctx.moveTo(30,100);
      ctx.lineTo(50,180);
      ctx.lineTo(60,150);
      ctx.lineTo(70,180);
      ctx.lineTo(90,100);
      ctx.stroke();  

      ctx.beginPath();
      ctx.lineJoin = "miter";
      ctx.strokeStyle = "#F00";
      ctx.lineWidth = 10;
      ctx.moveTo(120,100);
      ctx.lineTo(140,180);
      ctx.lineTo(150,150);
      ctx.lineTo(160,180);
      ctx.lineTo(180,100);
      ctx.stroke();  

      ctx.beginPath();
      ctx.lineJoin = "round";
      ctx.strokeStyle = "#F00";
      ctx.lineWidth = 10;
      ctx.moveTo(200,100);
      ctx.lineTo(220,180);
      ctx.lineTo(230,150);
      ctx.lineTo(240,180);
      ctx.lineTo(260,100);
      ctx.stroke();