Vẽ các đường với độ rộng dòng thay đổi liên tục trên canvas HTML

Để vẽ các đường có độ rộng đường thay đổi liên tục, bạn có thể thử chạy mã sau -

Ví dụ

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();
}