From c4c5577997175c4b3d15a94f4c8a9e2e111fbf78 Mon Sep 17 00:00:00 2001 From: jean-emmanuel Date: Sat, 12 Nov 2016 12:16:21 +0100 Subject: [PATCH] canvas: manually reset alpha instead of saving/restoring the context --- src/browser/js/app/widgets/pads/multixy.js | 3 +-- src/browser/js/app/widgets/pads/rgb.js | 3 +-- src/browser/js/app/widgets/pads/xy.js | 3 +-- src/browser/js/app/widgets/plots/_plots_base.js | 3 +-- src/browser/js/app/widgets/sliders/fader.js | 12 ++++-------- src/browser/js/app/widgets/sliders/knob.js | 3 +-- 6 files changed, 9 insertions(+), 18 deletions(-) diff --git a/src/browser/js/app/widgets/pads/multixy.js b/src/browser/js/app/widgets/pads/multixy.js index 328edef59..980fb3e7f 100644 --- a/src/browser/js/app/widgets/pads/multixy.js +++ b/src/browser/js/app/widgets/pads/multixy.js @@ -146,7 +146,6 @@ MultiXy.prototype.draw = function(){ var x = clip(this.pads[i].faders.x.percent,[0,100]) / 100 * (this.width - (this.pointSize * 2 + 2) * PXSCALE) + (this.pointSize + 1) * PXSCALE, y = (100 - clip(this.pads[i].faders.y.percent,[0,100])) / 100 * (this.height - (this.pointSize * 2 + 2) * PXSCALE) + (this.pointSize + 1) * PXSCALE - this.ctx.save() this.ctx.globalAlpha = 0.3 this.ctx.fillStyle = this.colors.custom @@ -154,7 +153,7 @@ MultiXy.prototype.draw = function(){ this.ctx.arc(x, y, this.pointSize * PXSCALE, Math.PI * 2, false) this.ctx.fill() - this.ctx.restore() + this.ctx.globalAlpha = 1 this.ctx.font = PXSCALE * 11 + 'px Droid Sans' this.ctx.fillText(i,x,y) diff --git a/src/browser/js/app/widgets/pads/rgb.js b/src/browser/js/app/widgets/pads/rgb.js index c7ad9d927..439f601e0 100644 --- a/src/browser/js/app/widgets/pads/rgb.js +++ b/src/browser/js/app/widgets/pads/rgb.js @@ -220,7 +220,6 @@ Rgb.prototype.draw = function(){ this.ctx.strokeStyle = color this.ctx.lineWidth = PXSCALE - this.ctx.save() this.ctx.globalAlpha = 0.3 this.ctx.beginPath() @@ -236,7 +235,7 @@ Rgb.prototype.draw = function(){ this.ctx.lineTo(x,this.height) this.ctx.stroke() - this.ctx.restore() + this.ctx.globalAlpha = 1 this.ctx.beginPath() this.ctx.arc(x, y, 4 * PXSCALE, Math.PI * 2, false) diff --git a/src/browser/js/app/widgets/pads/xy.js b/src/browser/js/app/widgets/pads/xy.js index 1de6534f6..68287d9ab 100644 --- a/src/browser/js/app/widgets/pads/xy.js +++ b/src/browser/js/app/widgets/pads/xy.js @@ -174,7 +174,6 @@ Xy.prototype.draw = function(){ this.ctx.lineWidth = PXSCALE this.ctx.strokeStyle = this.faders.x.colors.custom - this.ctx.save() this.ctx.globalAlpha = 0.3 this.ctx.beginPath() @@ -190,7 +189,7 @@ Xy.prototype.draw = function(){ this.ctx.lineTo(x,this.height) this.ctx.stroke() - this.ctx.restore() + this.ctx.globalAlpha = 1 this.ctx.beginPath() this.ctx.arc(x, y, 4 * PXSCALE, Math.PI * 2, false) diff --git a/src/browser/js/app/widgets/plots/_plots_base.js b/src/browser/js/app/widgets/plots/_plots_base.js index 861a3ffb0..049ba2f93 100644 --- a/src/browser/js/app/widgets/plots/_plots_base.js +++ b/src/browser/js/app/widgets/plots/_plots_base.js @@ -67,14 +67,13 @@ _plots_base.prototype.draw = function() { var origin = mapToScale(this.widgetData.origin||this.rangeY.min,[this.rangeY.min,this.rangeY.max],[this.height,0],0,this.widgetData.logScaleY,true) - this.ctx.save() this.ctx.globalAlpha = 0.1 this.ctx.fillStyle = this.colors.custom this.ctx.lineTo(this.width,origin) this.ctx.lineTo(0,origin) this.ctx.closePath() this.ctx.fill() - this.ctx.restore() + this.ctx.globalAlpha = 1 } diff --git a/src/browser/js/app/widgets/sliders/fader.js b/src/browser/js/app/widgets/sliders/fader.js index 3bc75140d..49669dfc4 100644 --- a/src/browser/js/app/widgets/sliders/fader.js +++ b/src/browser/js/app/widgets/sliders/fader.js @@ -159,7 +159,6 @@ Fader.prototype.draw = function(){ if (this.widgetData.compact) { - this.ctx.save() this.ctx.globalAlpha = 0.3 this.ctx.strokeStyle = this.colors.gauge this.ctx.beginPath() @@ -167,7 +166,7 @@ Fader.prototype.draw = function(){ this.ctx.lineTo(o, this.height / 2) this.ctx.lineWidth = this.height this.ctx.stroke() - this.ctx.restore() + this.ctx.globalAlpha = 1 this.ctx.beginPath() this.ctx.fillStyle = this.colors.knob @@ -191,11 +190,10 @@ Fader.prototype.draw = function(){ this.ctx.fillStyle = this.colors.knob - this.ctx.save() this.ctx.globalAlpha = 0.3 this.ctx.arc(d + this.margin * PXSCALE, this.height / 2, 10 * PXSCALE, Math.PI * 2, false) this.ctx.fill() - this.ctx.restore() + this.ctx.globalAlpha = 1 this.ctx.beginPath() this.ctx.arc(d + this.margin * PXSCALE, this.height / 2, 4 * PXSCALE, Math.PI * 2, false) @@ -208,7 +206,6 @@ Fader.prototype.draw = function(){ if (this.widgetData.compact) { - this.ctx.save() this.ctx.globalAlpha = 0.3 this.ctx.strokeStyle = this.colors.gauge this.ctx.beginPath() @@ -216,7 +213,7 @@ Fader.prototype.draw = function(){ this.ctx.lineTo(this.width / 2, o) this.ctx.lineWidth = this.width this.ctx.stroke() - this.ctx.restore() + this.ctx.globalAlpha = 1 this.ctx.beginPath() this.ctx.fillStyle = this.colors.knob @@ -241,11 +238,10 @@ Fader.prototype.draw = function(){ this.ctx.beginPath() this.ctx.fillStyle = this.colors.knob - this.ctx.save() this.ctx.globalAlpha = 0.3 this.ctx.arc(this.width / 2, d, 10 * PXSCALE, Math.PI * 2,false) this.ctx.fill() - this.ctx.restore() + this.ctx.globalAlpha = 1 this.ctx.beginPath() this.ctx.arc(this.width / 2, d, 4 * PXSCALE, Math.PI * 2,false) diff --git a/src/browser/js/app/widgets/sliders/knob.js b/src/browser/js/app/widgets/sliders/knob.js index e0a8ce7fa..5fc369f2a 100644 --- a/src/browser/js/app/widgets/sliders/knob.js +++ b/src/browser/js/app/widgets/sliders/knob.js @@ -161,13 +161,12 @@ Knob.prototype.draw = function(){ this.ctx.arc(this.width / 2, this.height / 2, this.minDimension / 2 - (10 + this.margin) * PXSCALE, min, max) this.ctx.stroke() - this.ctx.save() this.ctx.globalAlpha = 0.5 this.ctx.beginPath() this.ctx.strokeStyle = this.colors.gauge this.ctx.arc(this.width / 2, this.height / 2, this.minDimension / 2 - (10 + this.margin) * PXSCALE, Math.min(o,d), Math.max(o,d)) this.ctx.stroke() - this.ctx.restore() + this.ctx.globalAlpha = 1 this.ctx.save()