function roundedCornersBackground (params) { borderPoint1 = { x: params.cornerRadius, y: params.cornerRadius } borderPoint2 = { x: params.container.frame.width - params.cornerRadius, y: params.cornerRadius } borderPoint3 = { x: params.container.frame.width - params.cornerRadius, y: params.container.frame.height - params.cornerRadius } borderPoint4 = { x: params.cornerRadius, y: params.container.frame.height - params.cornerRadius } /* Now the transformations. */ if (params.coordinateSystem !== undefined) { // For instance Candles would use this borderPoint1 = params.coordinateSystem.transformThisPoint(borderPoint1) borderPoint2 = params.coordinateSystem.transformThisPoint(borderPoint2) borderPoint3 = params.coordinateSystem.transformThisPoint(borderPoint3) borderPoint4 = params.coordinateSystem.transformThisPoint(borderPoint4) } else { if (params.outsideViewPort === true) { // If the element is not affected by zoom borderPoint1 = transformThisPoint(borderPoint1, params.container) borderPoint2 = transformThisPoint(borderPoint2, params.container) borderPoint3 = transformThisPoint(borderPoint3, params.container) borderPoint4 = transformThisPoint(borderPoint4, params.container) } else { // For instance Panels use this borderPoint1 = params.container.frame.frameThisPoint(borderPoint1) borderPoint2 = params.container.frame.frameThisPoint(borderPoint2) borderPoint3 = params.container.frame.frameThisPoint(borderPoint3) borderPoint4 = params.container.frame.frameThisPoint(borderPoint4) } } if (params.fitFunction !== undefined) { borderPoint1 = params.fitFunction(borderPoint1) borderPoint2 = params.fitFunction(borderPoint2) borderPoint3 = params.fitFunction(borderPoint3) borderPoint4 = params.fitFunction(borderPoint4) } browserCanvasContext.setLineDash([0, 0]) /* Shadow */ if (params.castShadow === true) { let SHADOW_OFFSET = 2 browserCanvasContext.beginPath() browserCanvasContext.arc(borderPoint1.x + SHADOW_OFFSET, borderPoint1.y + SHADOW_OFFSET, params.cornerRadius, 1.0 * Math.PI, 1.5 * Math.PI) browserCanvasContext.lineTo(borderPoint2.x + SHADOW_OFFSET, borderPoint2.y - params.cornerRadius + SHADOW_OFFSET) browserCanvasContext.arc(borderPoint2.x + SHADOW_OFFSET, borderPoint2.y + SHADOW_OFFSET, params.cornerRadius, 1.5 * Math.PI, 2.0 * Math.PI) browserCanvasContext.lineTo(borderPoint3.x + params.cornerRadius + SHADOW_OFFSET, borderPoint3.y + SHADOW_OFFSET) browserCanvasContext.arc(borderPoint3.x + SHADOW_OFFSET, borderPoint3.y + SHADOW_OFFSET, params.cornerRadius, 0 * Math.PI, 0.5 * Math.PI) browserCanvasContext.lineTo(borderPoint4.x + SHADOW_OFFSET, borderPoint4.y + params.cornerRadius + SHADOW_OFFSET) browserCanvasContext.arc(borderPoint4.x + SHADOW_OFFSET, borderPoint4.y + SHADOW_OFFSET, params.cornerRadius, 0.5 * Math.PI, 1.0 * Math.PI) browserCanvasContext.lineTo(borderPoint1.x - params.cornerRadius + SHADOW_OFFSET, borderPoint1.y + SHADOW_OFFSET) browserCanvasContext.closePath() browserCanvasContext.lineWidth = 10 browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.BLACK + ', ' + 0.01 + ')' browserCanvasContext.stroke() browserCanvasContext.lineWidth = 5 browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.BLACK + ', ' + 0.01 + ')' browserCanvasContext.stroke() browserCanvasContext.lineWidth = 1 browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.BLACK + ', ' + 0.15 + ')' browserCanvasContext.stroke() } /* Background */ browserCanvasContext.beginPath() browserCanvasContext.arc(borderPoint1.x, borderPoint1.y, params.cornerRadius, 1.0 * Math.PI, 1.5 * Math.PI) browserCanvasContext.lineTo(borderPoint2.x, borderPoint2.y - params.cornerRadius) browserCanvasContext.arc(borderPoint2.x, borderPoint2.y, params.cornerRadius, 1.5 * Math.PI, 2.0 * Math.PI) browserCanvasContext.lineTo(borderPoint3.x + params.cornerRadius, borderPoint3.y) browserCanvasContext.arc(borderPoint3.x, borderPoint3.y, params.cornerRadius, 0 * Math.PI, 0.5 * Math.PI) browserCanvasContext.lineTo(borderPoint4.x, borderPoint4.y + params.cornerRadius) browserCanvasContext.arc(borderPoint4.x, borderPoint4.y, params.cornerRadius, 0.5 * Math.PI, 1.0 * Math.PI) browserCanvasContext.lineTo(borderPoint1.x - params.cornerRadius, borderPoint1.y) browserCanvasContext.closePath() browserCanvasContext.fillStyle = 'rgba(' + params.backgroundColor + ', ' + params.opacity + ')' browserCanvasContext.fill() browserCanvasContext.lineWidth = params.lineWidth browserCanvasContext.strokeStyle = 'rgba(' + params.borderColor + ', ' + params.opacity + ')' browserCanvasContext.stroke() }