Create and fill 3D array JavaScript

Question

I am trying to fill a 3d array (16x16x16) with "rgb(255, 48, 144)" and then draw a Rect with this colour by finding it in the array ( arr[15][3][9] ).

This is what I've got so far:

var ctx = document.getElementById("canvas").getContext("2d");
var canvas = document.getElementById("canvas");

var arr = new Array(16)
for(var i = 0; i < arr.length; i++){

    arr[i] = new Array(16);

for(var j = 0; j < arr[i].length; j++){


        arr[i][j] = "rgb(255, 48, 144)";

        for(var k = 0; k < arr[i][j].length; k++){
            arr[i][j][k] = "rgb(255, 48, 144)";
        }

    }
}
ctx.fillstyle = arr[15][3][9];
ctx.fillRect(0, 0, 100, 100);

<!doctype HTML>
<html>

<head>
    <meta charset="UTF-8">
    <title> Fargekube </title>
</head>


<body>

    <canvas id="canvas" width="200" height="200"></canvas>
    
</body>
</html>

Please describe your problem. What do you want to achieve?

Davi
– Davi

2018-11-23 09:03:32 +00:00
Commented Nov 23, 2018 at 9:03 — Davi
– Davi, Commented Nov 23, 2018 at 9:03

Orelsanpls · Accepted Answer · 2018-11-23 09:04:24Z

1

I think you initialized your 3 dimension array unwell. Is the following what you were trying to do?

Also, it's fillStyle and not fillstyle

var ctx = document.getElementById('canvas').getContext('2d');
var canvas = document.getElementById('canvas');

var dimensionSize = 16;

var arr = [];

for (var i = 0; i < dimensionSize; i += 1) {
  arr[i] = [];
  
  for (var j = 0; j < dimensionSize; j += 1) {
    arr[i][j] = [];
    
    for (var k = 0; k < dimensionSize; k += 1) {
      arr[i][j][k] = 'rgb(255, 48, 144)';
    }
  }
}

console.log(arr[15][3][9]);

ctx.fillStyle = arr[15][3][9];
ctx.fillRect(0, 0, 100, 100);

<!doctype HTML>
<html>

<head>
    <meta charset="UTF-8">
    <title> Fargekube </title>
</head>


<body>

    <canvas id="canvas" width="200" height="200"></canvas>
    
</body>
</html>

answered Nov 23, 2018 at 9:04

Orelsanpls

23.7k7 gold badges46 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Meek Over a year ago

Could you show me how to do it with the new array method as well? :)

Collectives™ on Stack Overflow

Create and fill 3D array JavaScript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related