From 35adcd6c2b26022cdd936b75bc85108d8aa0a15e Mon Sep 17 00:00:00 2001 From: Jukka Kurkela Date: Sat, 18 Jan 2020 02:06:51 +0200 Subject: [PATCH] Fix bar border artifacts (#6972) --- src/elements/element.rectangle.js | 28 ++++++++---------- .../controller.bar/horizontal-borders.png | Bin 1522 -> 4122 bytes 2 files changed, 13 insertions(+), 15 deletions(-) diff --git a/src/elements/element.rectangle.js b/src/elements/element.rectangle.js index c4ad49a9e..85d957a52 100644 --- a/src/elements/element.rectangle.js +++ b/src/elements/element.rectangle.js @@ -135,25 +135,23 @@ class Rectangle extends Element { } draw(ctx) { - var options = this.options; - var rects = boundingRects(this); - var outer = rects.outer; - var inner = rects.inner; + const options = this.options; + const {inner, outer} = boundingRects(this); - ctx.fillStyle = options.backgroundColor; - ctx.fillRect(outer.x, outer.y, outer.w, outer.h); + ctx.save(); - if (outer.w === inner.w && outer.h === inner.h) { - return; + if (outer.w !== inner.w || outer.h !== inner.h) { + ctx.beginPath(); + ctx.rect(outer.x, outer.y, outer.w, outer.h); + ctx.clip(); + ctx.rect(inner.x, inner.y, inner.w, inner.h); + ctx.fillStyle = options.borderColor; + ctx.fill('evenodd'); } - ctx.save(); - ctx.beginPath(); - ctx.rect(outer.x, outer.y, outer.w, outer.h); - ctx.clip(); - ctx.fillStyle = options.borderColor; - ctx.rect(inner.x, inner.y, inner.w, inner.h); - ctx.fill('evenodd'); + ctx.fillStyle = options.backgroundColor; + ctx.fillRect(inner.x, inner.y, inner.w, inner.h); + ctx.restore(); } diff --git a/test/fixtures/controller.bar/horizontal-borders.png b/test/fixtures/controller.bar/horizontal-borders.png index d6a10eab0955b3444a4715d65b3835baa5b6b6b8..1cd6913acfc05dee86e993471c3b7abb9302f706 100644 GIT binary patch literal 4122 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 x?QThi*?y}vd$@?2>>O*B}xDQ -- 2.47.2