canvas: manually reset alpha instead of saving/restoring the context

jean-emmanuel · Nov 12, 2016 · c4c5577 · c4c5577
1 parent 65b2cdb
commit c4c5577
Show file tree

Hide file tree

Showing 6 changed files with 9 additions and 18 deletions.
diff --git a/src/browser/js/app/widgets/pads/multixy.js b/src/browser/js/app/widgets/pads/multixy.js
@@ -146,15 +146,14 @@ 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
 
             this.ctx.beginPath()
             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
@@ -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
@@ -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
@@ -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
@@ -159,15 +159,14 @@ 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()
             this.ctx.moveTo(d, this.height / 2)
             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,15 +206,14 @@ 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()
             this.ctx.moveTo(this.width / 2, d)
             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
@@ -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()