I am working on a straightforward double buffering application with HTML5 canvas. (I've commented out the IIFE beginning and end to make debugging easier.) So far as I can tell, when I enter commands live from the developer console, it gives textbook appropriate results for e.g. painting a background image, or scaling and then painting a background image.
I was originally trying to do this as one detail of a tabbed page, but then pulled it out to its own page, which is self-sufficient other than CDN pulls and an uninteresting background image. The code, which duplicates the earlier reported behavior, runs:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>A Snowfall of Skills</title>
<style type="text/css">
canvas#display-background
{
display: none;
}
</style>
</head>
<body>
<canvas id="display-background"></canvas>
<canvas id="display-foreground"></canvas>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js">
</script>
<script
src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.js">
</script>
<script>
/*
;(jQuery.ready(function()
{
*/
console.log('Reached A');
var original_background_width = jQuery('#display-background'
)[0].width;
var original_background_height =
jQuery('#display-background')[0].height;
var background_width = jQuery(window).width() * .8 - 20;
var background_height = (original_background_height *
background_width / original_background_width);
jQuery('#display-background')[0].width = background_width;
jQuery('#display-background')[0].height = background_height;
jQuery('#display-foreground')[0].width = background_width;
jQuery('#display-foreground')[0].height = background_height;
var raw_background = new Image();
raw_background.src = '/images/skills-snowfall.jpg';
var background_scale = (.8 * jQuery(window).width() /
background_width);
var canvas_height = background_width / background_scale;
var background_canvas = jQuery('#display-background')[0];
var background_context = background_canvas.getContext('2d');
var foreground_canvas = jQuery('#display-foreground')[0];
var foreground_context = foreground_canvas.getContext('2d');
/*
background_context.drawImage(raw_background, 0, 0);
foreground_context.drawImage(raw_background, 0, 0);
*/
background_context.drawImage(raw_background,
0, 0, raw_background.width, raw_background.height,
0, 0, background_canvas.width, background_canvas.height);
foreground_context.drawImage(raw_background,
0, 0, raw_background.width, raw_background.height,
0, 0, foreground_canvas.width, foreground_canvas.height);
console.log('Reached Z');
/*
}()));
*/
</script>
</body>
</html>
The page does appear to be working in one thing; the background canvas is meant not to be directly displayed, although it should be copied to the foreground canvas; and Inspecting HTML elements confirms that there is one displayed canvas, with dimensions making sense.
If I reference raw_background, Chrome shows an IMG element. If I comment out the bracketing, both scaled and unscaled background declarations work correctly when entered manually to the Chrome console. But the context seems to be a noop when it's run live on the page; the Reached A and Reached Z messages are displayed with other diagnostics that are not in my code but appear to me to be innocuous.
What, exactly, am I doing that things basically work dead simple when I enter commands in Chrome's console, but show no visible effect when run as regular JavaScript inlined on a page?
