CODEWITHSUNDEEP
javascripthtmlcanvashtml5-canvas
Shut Up
Shut Up

Reputation: 33

I need to stack multiple randomly colored rectangles in html canvas

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

Upvotes: 3

Views: 115

Answers (3)

Adrian Pop
Adrian Pop

Reputation: 1967

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.

Upvotes: 2

JP4
JP4

Reputation: 1176

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>

Upvotes: 1

Thriller
Thriller

Reputation: 505

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.

Upvotes: 1

Related Questions