recycle cached Canvasses in Morphic widgets

HISTORY.md

@@ -12,6 +12,7 @@
 * gui: recycle cached Canvasses
 * objects: recycle cached Canvasses
 * blocks: recycle cached Canvasses
+* widgets: recycle cached Canvasses
 
 ## 5.4.0:
 * **New Features:**

snap.html

@@ -5,7 +5,7 @@
         <title>Snap! Build Your Own Blocks 5.4.1 - dev -</title>
         <link rel="shortcut icon" href="src/favicon.ico">
         <script type="text/javascript" src="src/morphic.js?version=2020-01-03"></script>
-        <script type="text/javascript" src="src/widgets.js?version=2019-10-16"></script>
+        <script type="text/javascript" src="src/widgets.js?version=2020-01-03"></script>
         <script type="text/javascript" src="src/blocks.js?version=2020-01-03"></script>
         <script type="text/javascript" src="src/threads.js?version=2019-12-19"></script>
         <script type="text/javascript" src="src/objects.js?version=2020-01-03"></script>

src/widgets.js

@@ -7,7 +7,7 @@
     written by Jens Mönig
     jens@moenig.org
 
-    Copyright (C) 2019 by Jens Mönig
+    Copyright (C) 2020 by Jens Mönig
 
     This file is part of Snap!.
 
@@ -85,7 +85,7 @@ HTMLCanvasElement, fontHeight, SymbolMorph, localize, SpeechBubbleMorph,
 ArrowMorph, MenuMorph, isString, isNil, SliderMorph, MorphicPreferences,
 ScrollFrameMorph, MenuItemMorph, Note*/
 
-modules.widgets = '2019-October-16';
+modules.widgets = '2020-January-03';
 
 var PushButtonMorph;
 var ToggleButtonMorph;
@@ -415,7 +415,7 @@ PushButtonMorph.prototype.createBackgrounds = function () {
         return null;
     }
 
-    this.normalImage = newCanvas(ext);
+    this.normalImage = newCanvas(ext, false, this.normalImage);
     context = this.normalImage.getContext('2d');
     this.drawOutline(context);
     this.drawBackground(context, this.color);
@@ -426,7 +426,7 @@ PushButtonMorph.prototype.createBackgrounds = function () {
         this.color.darker(this.contrast)
     );
 
-    this.highlightImage = newCanvas(ext);
+    this.highlightImage = newCanvas(ext, false, this.highlightImage);
     context = this.highlightImage.getContext('2d');
     this.drawOutline(context);
     this.drawBackground(context, this.highlightColor);
@@ -437,7 +437,7 @@ PushButtonMorph.prototype.createBackgrounds = function () {
         this.highlightColor.darker(this.contrast)
     );
 
-    this.pressImage = newCanvas(ext);
+    this.pressImage = newCanvas(ext, false, this.pressImage);
     context = this.pressImage.getContext('2d');
     this.drawOutline(context);
     this.drawBackground(context, this.pressColor);
@@ -720,7 +720,7 @@ ToggleButtonMorph.prototype.createBackgrounds = function () {
         return null;
     }
 
-    this.normalImage = newCanvas(ext);
+    this.normalImage = newCanvas(ext, false, this.normalImage);
     context = this.normalImage.getContext('2d');
     this.drawOutline(context);
     this.drawBackground(context, this.color);
@@ -731,7 +731,7 @@ ToggleButtonMorph.prototype.createBackgrounds = function () {
         this.color.darker(this.contrast)
     );
 
-    this.highlightImage = newCanvas(ext);
+    this.highlightImage = newCanvas(ext, false, this.highlightImage);
     context = this.highlightImage.getContext('2d');
     this.drawOutline(context);
     this.drawBackground(context, this.highlightColor);
@@ -744,7 +744,7 @@ ToggleButtonMorph.prototype.createBackgrounds = function () {
 
     // note: don't invert the 3D-ish edges for pressedImage, because
     // it will stay that way, and should not look inverted (or should it?)
-    this.pressImage = newCanvas(ext);
+    this.pressImage = newCanvas(ext, false, this.pressImage);
     context = this.pressImage.getContext('2d');
     this.drawOutline(context);
     this.drawBackground(context, this.pressColor);
@@ -2669,7 +2669,7 @@ DialogBoxMorph.prototype.drawNew = function () {
 
     // this.alpha = isFlat ? 0.9 : 1;
 
-    this.image = newCanvas(this.extent());
+    this.image = newCanvas(this.extent(), false, this.image);
     context = this.image.getContext('2d');
 
     // title bar
@@ -2941,7 +2941,7 @@ AlignmentMorph.prototype.init = function (orientation, padding) {
 // AlignmentMorph displaying and layout
 
 AlignmentMorph.prototype.drawNew = function () {
-    this.image = newCanvas(new Point(1, 1));
+    this.image = newCanvas(new Point(1, 1), false, this.image);
     this.fixLayout();
 };
 
@@ -3233,7 +3233,7 @@ InputFieldMorph.prototype.drawNew = function () {
     this.fixLayout();
 
     // initialize my surface property
-    this.image = newCanvas(this.extent());
+    this.image = newCanvas(this.extent(), false, this.image);
     context = this.image.getContext('2d');
     if (this.parent) {
         if (this.parent.color.eq(new Color(255, 255, 255))) {