Estoy tratando de dibujar en un lienzo a partir de una matriz de matrices que inicialmente debería ser gris #808080 . Ninguna de las permutaciones que estoy intentando está cambiando, tengo un lienzo de pantalla completa que es completamente blanco.
Creo que me he saltado algún paso básico al pasar de un imageData a un rectángulo gris dibujado en la pantalla.
¿Qué me estoy perdiendo o he hecho mal?
Gracias,
;(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>