Syntax error Drawing lines with continuously varying line width on HTML canvas

Drawing lines with continuously varying line width on HTML canvas

To draw lines with continuously varying line width, you can try to run the following code −

Example

var context = document.getElementById('canvas1').getContext('2d');
var pts = [null, null, null, null];
for(var i=-1; i<25; i=i+1)
{
   var width = 0.5+i/2;
   var m = 200;
   var x = Math.cos(i/4) * 180;
   var y = Math.sin(i/4) * 140;
   
   pts[0] = pts[1];
   pts[1] = pts[2];
   pts[2] = { X:x, Y:y};
   
   if(pts[0] == null)
   continue;
   var p0 = pts[0];
   var p1 = pts[1];
   var p2 = pts[2];
   var x0 = (p0.X + p1.X) / 2;
   var y0 = (p0.Y + p1.Y) / 2;
   var x1 = (p1.X + p2.X) / 2;
   var y1 = (p1.Y + p2.Y) / 2;
   
   context.beginPath();
   context.lineWidth = width;
   context.strokeStyle = "blue";
   context.moveTo(m+x0, m+y0);
   context.quadraticCurveTo(m+p1.X, m+p1.Y, m+x1, m+y1);
   context.stroke();
}
Updated on: 2020-06-25T07:45:56+05:30

573 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements