diff --git a/src/helpers/helpers.canvas.js b/src/helpers/helpers.canvas.js index 557799cc3..35a4297b8 100644 --- a/src/helpers/helpers.canvas.js +++ b/src/helpers/helpers.canvas.js @@ -101,6 +101,9 @@ export function measureLabelSize(ctx, options) { */ export function drawBox(ctx, rect, options) { const {x, y, width, height} = rect; + if (width <= 0 || height <= 0) { + return; + } ctx.save(); setShadowStyle(ctx, options); const stroke = setBorderStyle(ctx, options); @@ -108,7 +111,7 @@ export function drawBox(ctx, rect, options) { ctx.beginPath(); addRoundedRectPath(ctx, { x, y, w: width, h: height, - radius: clampAll(toTRBLCorners(options.borderRadius), 0, Math.min(width, height) / 2) + radius: clampAll(toTRBLCorners(options.borderRadius), 0, Math.max(0, Math.min(width, height) / 2)) }); ctx.closePath(); ctx.fill(); diff --git a/test/specs/box.spec.js b/test/specs/box.spec.js index 0951c7229..78f084614 100644 --- a/test/specs/box.spec.js +++ b/test/specs/box.spec.js @@ -186,4 +186,34 @@ describe('Box annotation', function() { } }); }); + + describe('non-positive dimensions', function() { + it('should not throw error when drawn with negative or zero dimensions', function() { + expect(function() { + window.scatterChart(10, 10, { + test: { + type: 'box', + xMin: 8, + xMax: 2, + yMin: 6, + yMax: 4, + borderRadius: 5 + } + }); + }).not.toThrowError(); + + expect(function() { + window.scatterChart(10, 10, { + test: { + type: 'box', + xMin: 5, + xMax: 5, + yMin: 5, + yMax: 5, + borderRadius: 5 + } + }); + }).not.toThrowError(); + }); + }); });