canvasでパスを画像に置き換えられますか？

現状

現在、canvasを使って、下記のリンクの再現をしています。

①HTML5 Canvas Grass Animation
②Move mouse across hairs

実現させたいこと

どちらもbezierCurveToを使って線を表しているのですが、
（①では緑の草、②ではオレンジの縦線）
この線自体を
添付した画像のようなものにそのまま置き換えたいと思っています。

bezierCurveToで表現されている部分を画像にするのは可能なのでしょうか？
また、画像の形状が複雑なのでcanvasにそのまま描画するのも無理か、と思い画像化を希望していますが
他にできる方法があれば教えていただきたいです。

canvasのマスクを使って切り抜いてみたりしたのですが、思っている動きになりませんでした。

色々と調べたのですが、わからなかったのでここで質問させていただくことにしました。
正直、実現は厳しいのかな、と諦めかけています。

代替案など、どんな情報でもいただけるとありがたいです。
よろしくお願いします。

追記・現在のコード

参考のリンクそのままです。文字数ではじかれてしまったので、jsは②だけ載せておきます。他に①のjsがあり、2つのjsを読み込んでいます。

html
1<?xml version="1.0" encoding="utf-8"?>
2<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:ibooks="http://vocabulary.itunes.apple.com/rdf/ibooks/vocabulary-extensions-1.0" epub:prefix="ibooks: http://vocabulary.itunes.apple.com/rdf/ibooks/vocabulary-extensions-1.0">
3<head>
4  <title>test</title>
5  <meta name="viewport" content="width=1024, height=768"/>
6  <meta charset="UTF-8"/>
7  <script src="js/media-overlay.js" type="text/javascript"></script>
8  <script src="js/jquery-3.3.1.min.js" type="text/javascript"></script>
9  <script src="js/ibooks.js" type="text/javascript"></script>
10
11  <link href="css/stylesheet.css" type="text/css" rel="stylesheet"/>
12  <link href="css/page.css" type="text/css" rel="stylesheet"/>
13</head>
14
15<body>
16<div class="page">
17	<div id="rice_field">
18	<canvas id="canvas1" width="1020" height="300"></canvas>
19	<canvas id="canvas2" width="1020" height="300"></canvas>
20	</div>
21</div>
22<script src="js/page.js" type="text/javascript"></script>
23<script src="js/page_2.js" type="text/javascript"></script>
24</body>
25</html>

js
1var canvas = document.getElementById("canvas2");
2var ctx = canvas.getContext("2d");
3var canvasOffset = $("#canvas2").offset();
4var offsetX = canvasOffset.left;
5var offsetY = canvasOffset.top;
6var cHeight = canvas.height;
7var showControls = true;
8var lastMouseX = 0;
9var lastTouchX = 0;
10// preset styling CONSTANTS
11var SWAY = .55; // max endpoint sway from center
12var C1Y = .10; // fixed Y of cp#1
13var C2SWAY = .20 // max cp#2 sway from center
14var C2Y = .75; // fixed Y of cp#2
15var YY = 60; // max height of ellipse at top of hair
16var PIPERCENT = Math.PI / 100;
17var hairs = [];
18// create hairs
19var newHairX = 100;
20var hairCount = 20;
21for (var i = 0; i < hairCount; i++) {
22    var randomLength = 100 + parseInt(Math.random() * 20);
23    addHair(newHairX + (i * 30), randomLength);
24}
25function addHair(x, length) {
26    hairs.push({
27        x: x,
28        length: length,
29        left: 0,
30        right: 0,
31        top: 0,
32        s: {
33            x: 0,
34            y: 0
35        },
36        c1: {
37            x: 0,
38            y: 0
39        },
40        c2: {
41            x: 0,
42            y: 0
43        },
44        e: {
45            x: 0,
46            y: 0
47        },
48        isInMotion: false,
49        currentX: 0
50    });
51}
52for (var i = 0; i < hairs.length; i++) {
53    var h = hairs[i];
54    setHairPointsFixed(h);
55    setHairPointsPct(h, 50);
56    draw(h);
57}
58function setHairPointsFixed(h) {
59    h.s.x = h.x;
60    h.s.y = cHeight;
61    h.c1.x = h.x;
62    h.c1.y = cHeight - h.length * C1Y;
63    h.c2.y = cHeight - h.length * C2Y;
64    h.top = cHeight - h.length;
65    h.left = h.x - h.length * SWAY;
66    h.right = h.x + h.length * SWAY;
67}
68function setHairPointsPct(h, pct) {
69    // endpoint
70    var a = Math.PI + PIPERCENT * pct;
71    h.e.x = h.x - ((h.length * SWAY) * Math.cos(a));
72    h.e.y = h.top + (YY * Math.sin(a));
73    // controlpoint#2
74    h.c2.x = h.x + h.length * (C2SWAY * 2 * pct / 100 - C2SWAY);
75}
76
77//////////////////////////////
78$("#canvas2").on('mousemove', function(e) {
79    mouseX = parseInt(e.clientX - offsetX);
80    mouseY = parseInt(e.clientY - offsetY);
81
82    // draw this frame based on mouse moves
83    ctx.clearRect(0, 0, cWidth, cHeight);
84    for (var i = 0; i < hairs.length; i++) 
85        {hairMoves(hairs[i], mouseX, mouseY);
86    }
87
88    lastMouseX = mouseX;
89})
90$("#canvas2").on('touchstart touchmove', function(e) {
91    e.preventDefault();
92    touchX = parseInt(e.changedTouches[0].clientX - offsetX);
93    touchY = parseInt(e.changedTouches[0].clientY  - offsetY);
94    // draw this frame based on touchmoves
95    ctx.clearRect(0, 0, cWidth, cHeight);
96    for (var i = 0; i < hairs.length; i++) {
97        hairMoves2(hairs[i], touchX, touchY);
98
99    };
100    lastTouchX = touchX;
101});
102
103function hairMoves(h, mouseX, mouseY) {
104
105    // No hair movement if not touching hair
106    if (mouseY < cHeight - h.length - YY) {
107        if (h.isInMotion) {
108            h.isInMotion = false;
109            setHairPointsPct(h, 50);
110        }
111        draw(h);
112        return;
113    }
114    // No hair movement if too deep in hair
115    if (mouseY > h.c1.y) {
116        draw(h);
117        return;
118    }
119    //
120    var pct = 50;
121    if (mouseX >= h.left && mouseX <= h.right) {
122
123        if (h.isInMotion) {
124            var pct = -(mouseX - h.right) / (h.right - h.left) * 100;
125            setHairPointsPct(h, pct);
126            draw(h);
127        } else {
128            // if hair is at rest
129            // but mouse has just contacted hair
130            // set hair in motion
131            if ((lastMouseX <= h.x && mouseX >= h.x) || (lastMouseX >= h.x && mouseX <= h.x)) {
132                h.isInMotion = true;
133                var pct = -(mouseX - h.right) / (h.right - h.left) * 100;
134            }
135            setHairPointsPct(h, pct);
136            draw(h);
137
138        }
139
140    } else {
141        if (h.isInMotion) {
142            h.isInMotion = false;
143            setHairPointsPct(h, 50);
144        };
145        draw(h);
146
147    }
148}
149
150function hairMoves2(h, touchX, touchY) {
151
152    // No hair movement if not touching hair
153    if (touchY < cHeight - h.length - YY) {
154        if (h.isInMotion) {
155            h.isInMotion = false;
156            setHairPointsPct(h, 50);
157        }
158        draw(h);
159        return;
160    }
161
162    // No hair movement if too deep in hair
163    if (touchY > h.c2.y) {
164        draw(h);
165        return;
166    }
167    //
168    var pct = 50;
169    if (touchX >= h.left && touchX <= h.right) {
170        if (h.isInMotion) {
171            var pct = -(touchX - h.right) / (h.right - h.left) * 100;
172            setHairPointsPct(h, pct);
173            draw(h);
174        } else {
175            // if hair is at rest
176            // but mouse has just contacted hair
177            // set hair in motion
178            if ((lastTouchX <= h.x && touchX >= h.x) || (lastTouchX >= h.x && touchX <= h.x)) {
179                h.isInMotion = true;
180                var pct = -(touchX - h.right) / (h.right - h.left) * 100;
181            }
182            setHairPointsPct(h, pct);
183            draw(h);
184
185        }
186
187    } else {
188        if (h.isInMotion) {
189            h.isInMotion = false;
190            setHairPointsPct(h, 50);
191        };
192        draw(h);
193
194    }
195}
196
197function dot(pt, color) {
198    ctx.beginPath();
199    ctx.arc(pt.x, pt.y, 5, 0, Math.PI * 2, false);
200    ctx.closePath();
201    ctx.fillStyle = color;
202    ctx.fill();
203}
204
205
206function draw(h) {
207
208    ctx.beginPath();
209    ctx.moveTo(h.s.x, h.s.y);
210    ctx.bezierCurveTo(h.c1.x, h.c1.y, h.c2.x, h.c2.y, h.e.x, h.e.y);
211    ctx.strokeStyle = "orange";
212    ctx.lineWidth = 3;
213    ctx.stroke();
214
215    if (showControls) {
216        dot(h.s, "green");
217        dot(h.c1, "red");
218        dot(h.c2, "blue");
219        dot(h.e, "purple");
220        ctx.beginPath();
221        ctx.rect(h.left, h.top - YY, (h.right - h.left), h.length * (1 - C1Y) + YY)
222        ctx.lineWidth = 1;
223        ctx.strokeStyle = "lightgray";
224        ctx.stroke();
225    }
226
227}