diff --git a/src/core/Canvas.js b/src/core/Canvas.js
index d2ae6be91..2abba7b04 100644
--- a/src/core/Canvas.js
+++ b/src/core/Canvas.js
@@ -416,7 +416,13 @@ const Canvas = {
         function fillWithPattern(p1, p2) {
             const degree = computeDegree(p1.x, p1.y, p2.x, p2.y);
             ctx.save();
-            ctx.translate(p1.x, p1.y - ctx.lineWidth / 2 / Math.cos(degree));
+            const cosd = Math.cos(degree);
+            if (Math.abs(cosd) < 1E-7) {
+                //a vertical line
+                ctx.translate(p1.x - ctx.lineWidth / 2, p1.y);
+            } else {
+                ctx.translate(p1.x, p1.y - ctx.lineWidth / 2 / cosd);
+            }
             ctx.rotate(degree);
             Canvas._stroke(ctx, lineOpacity);
             ctx.restore();
diff --git a/test/geometry/symbol/StrokeAndFillSpec.js b/test/geometry/symbol/StrokeAndFillSpec.js
index e22a73e5e..962e3158f 100644
--- a/test/geometry/symbol/StrokeAndFillSpec.js
+++ b/test/geometry/symbol/StrokeAndFillSpec.js
@@ -49,7 +49,7 @@ describe('StrokeAndFillSpec', function () {
         });
 
         it('line pattern', function (done) {
-            var line = new maptalks.LineString([center, center.add(0.0001, 0)], {
+            var line = new maptalks.LineString([center, center.add(0, -0.0001)], {
                 symbol:{
                     'linePatternFile' : 'resources/pattern2.png',
                     'lineOpacity' : 1,
@@ -60,7 +60,7 @@ describe('StrokeAndFillSpec', function () {
             });
             var v = new maptalks.VectorLayer('v').addTo(map);
             v.once('layerload', function () {
-                expect(v).not.to.be.painted(0, 0, [0, 0, 0]);
+                expect(v).to.be.painted(0, 0);
                 done();
             });
             v.addGeometry(line);
@@ -79,7 +79,7 @@ describe('StrokeAndFillSpec', function () {
             });
             var v = new maptalks.VectorLayer('v').addTo(map);
             v.once('layerload', function () {
-                expect(v).not.to.be.painted(0, 0, [255, 255, 255]);
+                expect(v).to.be.painted(0, 0);
                 done();
             });
             v.addGeometry(line);