I need to stack multiple randomly colored rectangles in html canvas

Question

I want to have hella stacked rectangles that go to the center of the canvas and have them all randomly colored, but my code is wrong and isn't working.

Here is the code i have:

var ctx = canvas.getContext("2d");
var cornerpad = 0;
var rectwidth = 790;
var rectheight = 590;

function drawrectangles() {
    ctx.beginPath;
    ctx.rect(cornerpad, cornerpad, rectwidth, rectheight);
    ctx.fillStyle = 'hsl(' + 360 * Math.random() + ', 50%, 50%)'
    ctx.fill();
    ctx.closePath;
}   

while(rectheight > 5) {
    rectheight =- 10;
    rectwidth =- 10;
    cornerpad++;
    drawrectangles();
}

I am pretty sure I made the while loop wrong since the random color works and the drawing rectangles works. Please help and explain what I did wrong

That's just a typo `ctx.beginPath` this is a method, you need to call it ( add `()` ) — Kaiido, Feb 12 '19 at 03:50

Adrian Pop · Accepted Answer · 2019-02-12T09:07:21.563

You had some mistakes in your code. First of all, you have rectheight =- 10; instead of rectheight -= 10. Your line of code is actually equivalent to rectheight = -10, so you are just setting both of the variables to -10, not decrementing them by 10.

Then, you used fill instead of fillRect. There is a fine difference between them, you may read more here or here. fillRect is a "stand-alone" command that draws and fills a rectangle. So if you issue multiple fillRect commands with multiple fillStyle commands, each new rect will be filled with the preceeding fillstyle.

For a nicer effect, I recommend using strokeRect instead of rect, but that's your decision. Also, you may want to play with the condition from the while, to actually make them appear centered.

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

var cornerpad = 0;
var rectwidth = 790;
var rectheight = 590;

function drawrectangles() {
  ctx.beginPath();
  ctx.rect(cornerpad, cornerpad, rectwidth, rectheight);
  ctx.fillStyle = 'hsl(' + 360 * Math.random() + ', 50%, 50%)';
  
  ctx.fill();
  ctx.stroke();
}

while (rectheight > 5) {
  rectheight -= 10;
  rectwidth -= 10;
  cornerpad += 10;
  
  //console.log(`(h, w)=(${rectheight}, ${rectwidth})`);
  drawrectangles();
}

canvas {
  border: 1px dotted black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/canvasjs.js"></script>
<canvas id="canvas" width="790" height="590">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>

Edit: I added a version that draws them much nicer, check it out :)

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

var cornerpad = 0;
var rectwidth = 600;
var rectheight = 400;
var middleLine = rectheight / 2;

function drawrectangles() {
  ctx.strokeRect(cornerpad, cornerpad, rectwidth, rectheight);
  ctx.fillStyle = 'hsl(' + 360 * Math.random() + ', 50%, 50%)'
  ctx.fillRect(cornerpad, cornerpad, rectwidth, rectheight);
}

while (cornerpad < middleLine) {
  rectheight -= 20;
  rectwidth -= 20;
  cornerpad += 10;

  //console.log(`(h, w)=(${rectheight}, ${rectwidth})`);
  drawrectangles();
}

canvas {
  border: 1px dotted black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/canvasjs.js"></script>
<canvas id="canvas" width="600" height="400">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>

Cheers!

Edit 2: Because I was too absorbed by the =- 10 thing, I forgot to point out to actually use beginPath and closePath as functions and to call them as ctx.beginPath() and ctx.closePath(). Thanks to Kaiido for pointing that out and for the two working additional jsfiddles.

@ShutUp Great! I edited my psot with a much nicer version, maybe you'd like that too :) Just play along with the numbers to make your desired effect. Cheers! — Adrian Pop, Feb 12 '19 at 01:14
fill was just fine, the problem was that they didn't call beginPath — Kaiido, Feb 12 '19 at 04:05
@Kaiido thanks for poiting that out. I added an edit to my post. — Adrian Pop, Feb 12 '19 at 08:51
No, you didn't get it. beginPath works with fill(): https://jsfiddle.net/dyzm3wbu/ fillRect has its own [beginPath()rect()] and if you wish to stroke, you just have to call stroke https://jsfiddle.net/dyzm3wbu/2/ — Kaiido, Feb 12 '19 at 08:56

score 1 · Answer 2 · answered Feb 12 '19 at 01:04

1

I believe your problem is laying in this expressions =- what you mean is -=. what you are doing now is setting rectheight value to -10 instead of reducing it by 10, thus your while loop just gets executed once.

answered Feb 12 '19 at 01:04

Thriller

485
4
11

thx for reply, i tried that and it did make the one rectangle that appears on screen bigger, but its still only one rectangle and i want hella – Shut Up Feb 12 '19 at 01:09

score 1 · Answer 3 · answered Feb 12 '19 at 01:09

You missed some closing brackets and had the =- around the wrong way. I also change the rect to fill straight away.

var ctx = canvas.getContext("2d");
var cornerpad = 0;
var rectwidth = 790;
var rectheight = 590;

function drawrectangles() {
    ctx.fillStyle = 'hsl(' + 360 * Math.random() + ', 50%, 50%)'
    ctx.fillRect(cornerpad, cornerpad, rectwidth, rectheight);
    
}   

while(rectheight > 5) {
  
    rectheight -= 10;
    rectwidth -= 10;
    cornerpad++;
    drawrectangles();
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <canvas id='canvas' height=590 width=790></canvas>
</body>
</html>

also thank u i just saw the other guys post first but u helped too — Shut Up, Feb 12 '19 at 01:14

I need to stack multiple randomly colored rectangles in html canvas

3 Answers3