Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Drawing lines with continuously varying line width on HTML canvas
Drawing lines with continuously varying line width on HTML canvas creates smooth, dynamic visual effects. This technique uses quadratic curves and gradually increases the line width to create flowing, organic-looking lines.
Understanding the Approach
The technique involves generating a series of points along a curved path and drawing segments between them with incrementally increasing line widths. Each segment uses quadraticCurveTo() to create smooth curves rather than sharp angles.
Complete Example
<!DOCTYPE html>
<html>
<head>
<title>Variable Line Width Canvas</title>
</head>
<body>
<canvas id="canvas1" width="400" height="400" style="border: 1px solid #ccc;"></canvas>
<script>
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();
}
</script>
</body>
</html>
How It Works
The algorithm creates a spiral pattern with varying line thickness:
- Point Generation: Uses trigonometric functions to create circular coordinates
-
Width Calculation:
width = 0.5 + i/2gradually increases thickness - Smooth Curves: Calculates midpoints between consecutive points for smooth transitions
-
Quadratic Curves: Uses
quadraticCurveTo()for curved line segments
Key Parameters
| Parameter | Purpose | Value |
|---|---|---|
width |
Controls line thickness | 0.5 + i/2 (increases gradually) |
m |
Center offset | 200 (canvas center) |
x, y |
Spiral coordinates | Based on cos/sin functions |
Creating Custom Patterns
You can modify the line width formula for different effects:
<!DOCTYPE html>
<html>
<head>
<title>Custom Variable Line Width</title>
</head>
<body>
<canvas id="canvas2" width="400" height="400" style="border: 1px solid #ccc;"></canvas>
<script>
var ctx = document.getElementById('canvas2').getContext('2d');
var points = [null, null, null];
for(var i = 0; i < 30; i++) {
// Oscillating width instead of linear increase
var width = 2 + Math.sin(i * 0.3) * 8;
var centerX = 200;
var centerY = 200;
var x = Math.cos(i * 0.2) * (100 + i * 2);
var y = Math.sin(i * 0.2) * (100 + i * 2);
points[0] = points[1];
points[1] = points[2];
points[2] = { x: x, y: y };
if(points[0] == null) continue;
var p0 = points[0];
var p1 = points[1];
var p2 = points[2];
ctx.beginPath();
ctx.lineWidth = width;
ctx.strokeStyle = `hsl(${i * 12}, 70%, 50%)`;
ctx.moveTo(centerX + p0.x, centerY + p0.y);
ctx.quadraticCurveTo(centerX + p1.x, centerY + p1.y, centerX + p2.x, centerY + p2.y);
ctx.stroke();
}
</script>
</body>
</html>
Conclusion
Variable line width drawing creates dynamic, artistic effects on HTML canvas. By combining mathematical functions for positioning with gradual width changes, you can create smooth, flowing lines perfect for decorative graphics and artistic applications.
626 Views
