shithub: puzzles

Info  •  Files  •  Log  •  Branches

js: Remove alpha channel from almost all our canvases

Specifying the { alpha: false } option when creating a rendering context
tells the browser that we won't use transparency, and the standard
puzzle canvases, along with blitters, are all opaque.  No obvious
effect, but the MDN suggests that this should reduce CPU usage.

The one exception here is the resize handle, which actually is
transparent.

--- a/emcclib.js

+++ b/emcclib.js

@@ -224,7 +224,7 @@

      * Prepare to do some drawing on the canvas.

      */

     js_canvas_start_draw: function() {

-        ctx = offscreen_canvas.getContext('2d');

+        ctx = offscreen_canvas.getContext('2d', { alpha: false });

         update_xmin = update_xmax = update_ymin = update_ymax = undefined;

     },

@@ -257,7 +257,8 @@

      */

     js_canvas_end_draw: function() {

         if (update_xmin !== undefined) {

-            var onscreen_ctx = onscreen_canvas.getContext('2d');

+            var onscreen_ctx =

+                onscreen_canvas.getContext('2d', { alpha: false });

             onscreen_ctx.drawImage(offscreen_canvas,

                                    update_xmin, update_ymin,

                                    update_xmax - update_xmin,

@@ -403,7 +404,7 @@

             return midpoint_cache[font];

         // Find the width of the string

-        var ctx1 = onscreen_canvas.getContext('2d');

+        var ctx1 = onscreen_canvas.getContext('2d', { alpha: false });

         ctx1.font = font;

         var width = (ctx1.measureText(midpoint_test_str).width + 1) | 0;

@@ -410,7 +411,7 @@

         // Construct a test canvas of appropriate size, initialise it to

         // black, and draw the string on it in white

         var measure_canvas = document.createElement('canvas');

-        var ctx2 = measure_canvas.getContext('2d');

+        var ctx2 = measure_canvas.getContext('2d', { alpha: false });

         ctx2.canvas.width = width;

         ctx2.canvas.height = 2*height;

         ctx2.fillStyle = "#000000";

@@ -493,7 +494,7 @@

      * the screen.

      */

     js_canvas_copy_to_blitter: function(id, x, y, w, h) {

-        var blitter_ctx = blitters[id].getContext('2d');

+        var blitter_ctx = blitters[id].getContext('2d', { alpha: false });

         blitter_ctx.drawImage(offscreen_canvas,

                               x, y, w, h,

                               0, 0, w, h);