diff --git a/draftlogs/6318_fix.md b/draftlogs/6318_fix.md
new file mode 100644
index 00000000000..ddf245797a2
--- /dev/null
+++ b/draftlogs/6318_fix.md
@@ -0,0 +1 @@
+ - Fix drawing & exporting patterns with transparent color [[#6318](https://github.com/plotly/plotly.js/pull/6318)]
diff --git a/src/components/drawing/index.js b/src/components/drawing/index.js
index ca3ac9bca02..b56f137cac8 100644
--- a/src/components/drawing/index.js
+++ b/src/components/drawing/index.js
@@ -410,6 +410,12 @@ drawing.pattern = function(sel, calledBy, gd, patternID, shape, size, solidity,
     var path, linewidth, radius;
     var patternTag;
     var patternAttrs = {};
+
+    var fgC = tinycolor(fgcolor);
+    var fgRGB = Color.tinyRGB(fgC);
+    var fgAlpha = fgC.getAlpha();
+    var opacity = fgopacity * fgAlpha;
+
     switch(shape) {
         case '/':
             width = size * Math.sqrt(2);
@@ -421,8 +427,8 @@ drawing.pattern = function(sel, calledBy, gd, patternID, shape, size, solidity,
             patternTag = 'path';
             patternAttrs = {
                 'd': path,
-                'opacity': fgopacity,
-                'stroke': fgcolor,
+                'opacity': opacity,
+                'stroke': fgRGB,
                 'stroke-width': linewidth + 'px'
             };
             break;
@@ -436,8 +442,8 @@ drawing.pattern = function(sel, calledBy, gd, patternID, shape, size, solidity,
             patternTag = 'path';
             patternAttrs = {
                 'd': path,
-                'opacity': fgopacity,
-                'stroke': fgcolor,
+                'opacity': opacity,
+                'stroke': fgRGB,
                 'stroke-width': linewidth + 'px'
             };
             break;
@@ -454,8 +460,8 @@ drawing.pattern = function(sel, calledBy, gd, patternID, shape, size, solidity,
             patternTag = 'path';
             patternAttrs = {
                 'd': path,
-                'opacity': fgopacity,
-                'stroke': fgcolor,
+                'opacity': opacity,
+                'stroke': fgRGB,
                 'stroke-width': linewidth + 'px'
             };
             break;
@@ -468,8 +474,8 @@ drawing.pattern = function(sel, calledBy, gd, patternID, shape, size, solidity,
             patternTag = 'path';
             patternAttrs = {
                 'd': path,
-                'opacity': fgopacity,
-                'stroke': fgcolor,
+                'opacity': opacity,
+                'stroke': fgRGB,
                 'stroke-width': linewidth + 'px'
             };
             break;
@@ -482,8 +488,8 @@ drawing.pattern = function(sel, calledBy, gd, patternID, shape, size, solidity,
             patternTag = 'path';
             patternAttrs = {
                 'd': path,
-                'opacity': fgopacity,
-                'stroke': fgcolor,
+                'opacity': opacity,
+                'stroke': fgRGB,
                 'stroke-width': linewidth + 'px'
             };
             break;
@@ -497,8 +503,8 @@ drawing.pattern = function(sel, calledBy, gd, patternID, shape, size, solidity,
             patternTag = 'path';
             patternAttrs = {
                 'd': path,
-                'opacity': fgopacity,
-                'stroke': fgcolor,
+                'opacity': opacity,
+                'stroke': fgRGB,
                 'stroke-width': linewidth + 'px'
             };
             break;
@@ -515,8 +521,8 @@ drawing.pattern = function(sel, calledBy, gd, patternID, shape, size, solidity,
                 'cx': width / 2,
                 'cy': height / 2,
                 'r': radius,
-                'opacity': fgopacity,
-                'fill': fgcolor
+                'opacity': opacity,
+                'fill': fgRGB
             };
             break;
     }
@@ -550,6 +556,10 @@ drawing.pattern = function(sel, calledBy, gd, patternID, shape, size, solidity,
             });
 
             if(bgcolor) {
+                var bgC = tinycolor(bgcolor);
+                var bgRGB = Color.tinyRGB(bgC);
+                var bgAlpha = bgC.getAlpha();
+
                 var rects = el.selectAll('rect').data([0]);
                 rects.exit().remove();
                 rects.enter()
@@ -557,7 +567,8 @@ drawing.pattern = function(sel, calledBy, gd, patternID, shape, size, solidity,
                     .attr({
                         'width': width + 'px',
                         'height': height + 'px',
-                        'fill': bgcolor
+                        'fill': bgRGB,
+                        'fill-opacity': bgAlpha,
                     });
             }
 
diff --git a/test/image/baselines/pattern_bars.png b/test/image/baselines/pattern_bars.png
index 521ae7c689f..077c05cf164 100644
Binary files a/test/image/baselines/pattern_bars.png and b/test/image/baselines/pattern_bars.png differ
diff --git a/test/image/baselines/scatter_fill_pattern.png b/test/image/baselines/scatter_fill_pattern.png
index 36546821c82..0845c51ce60 100644
Binary files a/test/image/baselines/scatter_fill_pattern.png and b/test/image/baselines/scatter_fill_pattern.png differ