diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 18fb723..cec8c32 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -191,6 +191,7 @@ if (style.dropShadow) { this.context.shadowBlur = style.dropShadowBlur; + this.context.globalAlpha = style.dropShadowAlpha; if (style.dropShadowBlur > 0) { @@ -239,12 +240,13 @@ } } + // reset the shadow blur and alpha that was set by the drop shadow, for the regular text + this.context.shadowBlur = 0; + this.context.globalAlpha = 1; + // set canvas text styles this.context.fillStyle = this._generateFillStyle(style, lines); - // remove blur if set for the drop shadow - this.context.shadowBlur = 0; - // draw lines line by line for (let i = 0; i < lines.length; i++) { diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 18fb723..cec8c32 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -191,6 +191,7 @@ if (style.dropShadow) { this.context.shadowBlur = style.dropShadowBlur; + this.context.globalAlpha = style.dropShadowAlpha; if (style.dropShadowBlur > 0) { @@ -239,12 +240,13 @@ } } + // reset the shadow blur and alpha that was set by the drop shadow, for the regular text + this.context.shadowBlur = 0; + this.context.globalAlpha = 1; + // set canvas text styles this.context.fillStyle = this._generateFillStyle(style, lines); - // remove blur if set for the drop shadow - this.context.shadowBlur = 0; - // draw lines line by line for (let i = 0; i < lines.length; i++) { diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index 3b51999..890950b 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -8,6 +8,7 @@ align: 'left', breakWords: false, dropShadow: false, + dropShadowAlpha: 1, dropShadowAngle: Math.PI / 6, dropShadowBlur: 0, dropShadowColor: '#000000', @@ -49,6 +50,7 @@ * @param {boolean} [style.breakWords=false] - Indicates if lines can be wrapped within words, it * needs wordWrap to be set to true * @param {boolean} [style.dropShadow=false] - Set a drop shadow for the text + * @param {number} [style.dropShadowAlpha=1] - Set alpha for the drop shadow * @param {number} [style.dropShadowAngle=Math.PI/6] - Set a angle of the drop shadow * @param {number} [style.dropShadowBlur=0] - Set a shadow blur radius * @param {string} [style.dropShadowColor='#000000'] - A fill style to be used on the dropshadow e.g 'red', '#00FF00' @@ -157,6 +159,19 @@ } } + get dropShadowAlpha() + { + return this._dropShadowAlpha; + } + set dropShadowAlpha(dropShadowAlpha) + { + if (this._dropShadowAlpha !== dropShadowAlpha) + { + this._dropShadowAlpha = dropShadowAlpha; + this.styleID++; + } + } + get dropShadowAngle() { return this._dropShadowAngle;