Creating shapes in canvas of varying sizes and colors

Question

I'm working on a project that requires me to make a text box in which the user will enter a number between 1 and 10. The program will then take this input and create a series of shapes (if the user enters 4, then 4 shapes should be drawn on the canvas). These shapes are also supposed to be different sizes, each shape smaller than the last. The shapes are also supposed to each be a different color.

The problem is I have no idea how to do this, I know how to create a canvas and draw shapes, but the whole, different sizes, colors, and drawing as many shapes as is entered in the text box is throwing me off. Could anyone point me in the right direction?

Answer 1

Firstly to draw the number of boxes that the user inputs we can just have the input be used as a for loop condition:

// "input" is the users entered number, make sure to parseInt() it
for(var i = input; i > 0; i--) {
    // Draw shape of size "i" and color "colors[i-1]" 
}

Since 10 is the largest number we can have we can make an array of ten colors: colors = ["red","blue","yellow", ... ,"green"] . Now the reason why I went from input to 0 in the for loop is because we have an number that's getting smaller, we can use i as the size of the box in the loop. And you can use i for positioning for the boxes (for example times it by 10 and use it as a varying x position). Or simply make the x and y random.

Now with the concept down a full example might look like so:

 var ctx = document.getElementById("canvas").getContext("2d"); var canvasWidth = document.getElementById("canvas").width; var yPos = 100; var input = 8; var colors = ["red","blue","yellow","pink","grey","black","aqua","brown","cyan","green"] for(var i = input; i > 0; i--) { // Draw shape of size "i" and color "colors[i]" ctx.fillStyle = colors[i-1]; ctx.fillRect(canvasWidth - i*25, yPos, i*3, i*3); } 

 canvas{ border: 1px solid black; } 

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

Edit : Changed sizes to show up left-to-right, per OP's request.

Answer 2

When the user click submit, you should call a javascript function which does the following:

1. Get the number of shapes to be drawn
2. Get canvas element by ID
3. Based on the number of shapes, using conditional statements, draw the shapes (the starting point would be previous object x (or y depending on your preference) + current x (or y) )

To get different colors use on border use: ctx.strokeStyle="green"; & for different fill color use: ctx.fillStyle="red";

For tutorial on how to go about different shapes refer: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes

Fiddle : http://jsfiddle.net/7v85bzam/1/

You may need to experiment a bit with the positioning (x, y co-ordinates)