Canvas Simple Shapes

FOR loop and functions

by brouser

HTML

<!-- Create canvas element in HTML code-->
<canvas id="myCanvas" width="800" height="600">
  Sorry, Your browser doesn't support canvas elements!
</canvas>

CSS

canvas{

  border: 3px dotted blue;

}

JavaScript

/* create multiple shapes using a FOR loop */

// necessary commands that are always needed
var canvas = document.getElementById("myCanvas");
var canvasContext = canvas.getContext("2d");

// this function creates and places a fill color rectangle
function makeFillColorRect(topLeftX, topLeftY, width, height, color) {
    canvasContext.fillStyle = color;
    canvasContext.fillRect(topLeftX, topLeftY, width, height);
}

// this function creates and places a stroke color rectangle
function makeStrokeColorRect(topLeftX, topLeftY, width, height, color) {
    canvasContext.strokeStyle = color;
    canvasContext.strokeRect(topLeftX, topLeftY, width, height);
}

// this function creates and places a stroke color circle
function makeStrokeColorCircle(xCenter, yCenter, radius, color) {
    canvasContext.strokeStyle = color;
    canvasContext.beginPath();
    canvasContext.arc(xCenter, yCenter, radius, 0, Math.PI*2, true);
    canvasContext.stroke();
}

// this function creates and places a fill color circle
function makeFillColorCircle(xCenter, yCenter, radius, color) {
    canvasContext.fillStyle = color;
    canvasContext.beginPath();
    canvasContext.arc(xCenter, yCenter, radius, 0, Math.PI*2, true);
    canvasContext.fill();
}

// rectangle specifics
var xValueOfRectancle = 20;
var widthRectangle = 150;
var heightRectangle = 100;
var colorRectangle = "red"

// for loop which changles the y value of the rectangle and draws 3 total.
for(var i = 20; i <= 260; i += 120) {
    makeFillColorRect(xValueOfRectancle, i, widthRectangle, heightRectangle, colorRectangle);
}

// how would you draw three color fill rects horizontally?
// draw a color stroke circle 3 times?
// !! we could insert any one of these functions in a for loop or all of them. !!