HTML कैनवास पर लगातार बदलती लाइन चौड़ाई के साथ लाइनें बनाएं

लगातार बदलती लाइन चौड़ाई के साथ लाइनें बनाने के लिए, आप निम्न कोड आज़मा सकते हैं:

उदाहरण

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