Tell me please. How can I bring my entire array to the future field (drawn using canvas) and fill each cell with the colors corresponding to the number in the cell of the array. A field of canvas will look like a simple table.

Markup:

<canvas id="can1" width="300" height="300"></canvas>

Script:

 function cubik() { var myCanvas = document.getElementById("can1"); if (!myCanvas.getContext) { return; } var myContext = myCanvas.getContext("2d"); //здесь будет нарисована таблица, еще не нашел решение! } cubik(); var myArr; function main(sizeX, sizeY) { myArr = Array(sizeX); for (var i = 0; i < myArr.length; i++) { myArr[i] = Array(sizeY); for (var j = 0; j < myArr[i].length; j++) { myArr[i][j] = Math.round(Math.random() * 4); } } } function () { main(20, 30); }

    1 answer 1

    Something like this:

     <html> <head> <script> function draw() { var colors = [ ["#000", "#111", "#222"], ["#333", "#444", "#555"], ["#666", "#777", "#888"] ]; var canvas = document.getElementById("z"); var context = canvas.getContext("2d"); for (i = 0; i < 3; i++) { for (j = 0; j < 3; j++) { context.strokeStyle = colors[i][j]; context.fillStyle = colors[i][j]; context.fillRect(i * 90, j * 90, 90, 90); } } } </script> </head> <body onclick="draw();"> <canvas id="z" height="270" width="270" /> </body> </html>
    • Thank you very much, not exactly what I wanted, of course, but already some kind of help =) I will continue to think with my head! Thanks again! - Senech