I am trying to draw on a canvas from an array of arrays that should initially be grey #808080. None of the permutations I am trying is changing that I have a full-screen canvas that is completely white.
I believe that I have missed some basic step in going from an imageData to a grey rectangle drawn on the screen.
What am I missing, or have I otherwise done wrong?
Thanks,
;(function() {
var context = null;
var grid = [];
var height = null;
var image_data = null;
var width = null;
var draw = function() {
var data = image_data.data;
for (var index = 0; index < data.length; index += 4) {
var x = Math.floor(Math.floor(index / 4) / width);
var y = Math.floor(Math.floor(index / 4) * width);
data[index] = grid[x][y][0];
data[index + 1] = grid[x][y][1];
data[index + 2] = grid[x][y][2];
}
image_data.data = data;
context.putImageData(image_data, 0, 0);
}
var init = function() {
height = jQuery(window).height();
width = jQuery(window).width();
jQuery('#container').html('<canvas id="map" height="' + height + '" width="' + width + '"></canvas>')
context = document.getElementById('map').getContext('2d');
image_data = context.getImageData(0, 0, width, height);
for (var outer = 0; outer < width; outer += 1) {
grid[outer] = [];
for (var inner = 0; inner < height; inner += 1) {
grid[outer][inner] = [128, 128, 128];
}
}
}
var start_drawing = function() {
draw();
setTimeout(start_drawing, 1);
};
init();
start_drawing();
})();<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div id="container"></div>