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.
This commit is contained in:
Ben Harris
2022-11-25 19:13:43 +00:00
parent a6a799720f
commit 115edab459

View File

@ -224,7 +224,7 @@ mergeInto(LibraryManager.library, {
* Prepare to do some drawing on the canvas. * Prepare to do some drawing on the canvas.
*/ */
js_canvas_start_draw: function() { 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; update_xmin = update_xmax = update_ymin = update_ymax = undefined;
}, },
@ -257,7 +257,8 @@ mergeInto(LibraryManager.library, {
*/ */
js_canvas_end_draw: function() { js_canvas_end_draw: function() {
if (update_xmin !== undefined) { 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, onscreen_ctx.drawImage(offscreen_canvas,
update_xmin, update_ymin, update_xmin, update_ymin,
update_xmax - update_xmin, update_xmax - update_xmin,
@ -403,14 +404,14 @@ mergeInto(LibraryManager.library, {
return midpoint_cache[font]; return midpoint_cache[font];
// Find the width of the string // Find the width of the string
var ctx1 = onscreen_canvas.getContext('2d'); var ctx1 = onscreen_canvas.getContext('2d', { alpha: false });
ctx1.font = font; ctx1.font = font;
var width = (ctx1.measureText(midpoint_test_str).width + 1) | 0; var width = (ctx1.measureText(midpoint_test_str).width + 1) | 0;
// Construct a test canvas of appropriate size, initialise it to // Construct a test canvas of appropriate size, initialise it to
// black, and draw the string on it in white // black, and draw the string on it in white
var measure_canvas = document.createElement('canvas'); 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.width = width;
ctx2.canvas.height = 2*height; ctx2.canvas.height = 2*height;
ctx2.fillStyle = "#000000"; ctx2.fillStyle = "#000000";
@ -493,7 +494,7 @@ mergeInto(LibraryManager.library, {
* the screen. * the screen.
*/ */
js_canvas_copy_to_blitter: function(id, x, y, w, h) { 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, blitter_ctx.drawImage(offscreen_canvas,
x, y, w, h, x, y, w, h,
0, 0, w, h); 0, 0, w, h);