From e95903d345d1b1bd397a6e22a979c1c88179fecd Mon Sep 17 00:00:00 2001 From: Simon Brunel Date: Sat, 1 Jul 2017 09:45:42 +0200 Subject: [PATCH] Clamp radius when drawing rounded rectangle --- src/helpers/helpers.canvas.js | 24 +++++++++++++----------- 1 file changed, 13 insertions(+), 11 deletions(-) diff --git a/src/helpers/helpers.canvas.js b/src/helpers/helpers.canvas.js index 917b296158d..22bf58f312b 100644 --- a/src/helpers/helpers.canvas.js +++ b/src/helpers/helpers.canvas.js @@ -24,20 +24,22 @@ module.exports = function(Chart) { * @param {Number} width - The rectangle's width. * @param {Number} height - The rectangle's height. * @param {Number} radius - The rounded amount (in pixels) for the four corners. - * @todo handler `radius` as top-left, top-right, bottom-right, bottom-left array/object? - * @todo clamp `radius` to the maximum "correct" value. + * @todo handle `radius` as top-left, top-right, bottom-right, bottom-left array/object? */ roundedRect: function(ctx, x, y, width, height, radius) { if (radius) { - ctx.moveTo(x + radius, y); - ctx.lineTo(x + width - radius, y); - ctx.quadraticCurveTo(x + width, y, x + width, y + radius); - ctx.lineTo(x + width, y + height - radius); - ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height); - ctx.lineTo(x + radius, y + height); - ctx.quadraticCurveTo(x, y + height, x, y + height - radius); - ctx.lineTo(x, y + radius); - ctx.quadraticCurveTo(x, y, x + radius, y); + var rx = Math.min(radius, width/2); + var ry = Math.min(radius, height/2); + + ctx.moveTo(x + rx, y); + ctx.lineTo(x + width - rx, y); + ctx.quadraticCurveTo(x + width, y, x + width, y + ry); + ctx.lineTo(x + width, y + height - ry); + ctx.quadraticCurveTo(x + width, y + height, x + width - rx, y + height); + ctx.lineTo(x + rx, y + height); + ctx.quadraticCurveTo(x, y + height, x, y + height - ry); + ctx.lineTo(x, y + ry); + ctx.quadraticCurveTo(x, y, x + rx, y); } else { ctx.rect(x, y, width, height); }