shape functions in progress

by brouser

HTML

<canvas id="myCanvas" width="800" height="600"></canvas>

CSS

canvas {
  border: 3px dotted blue;
}

JavaScript

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

function makeStrokeColorRect(topLeftX, topLeftY, width, height, color) {
    ctx.strokeStyle = color;
    ctx.strokeRect(topLeftX, topLeftY, width, height);
}

function makeFillColorRect(topLeftX, topLeftY, width, height, color) {
    ctx.fillStyle = color;
    ctx.fillRect(topLeftX, topLeftY, width, height);
}

function makeStrokeColorCircle(xCenter, yCenter, radius, color) {
    ctx.strokeStyle = color;
    ctx.beginPath();
    ctx.arc(xCenter, yCenter, radius, 0, Math.PI * 2, true);
    ctx.stroke();
}

function makeFillColorCircle(xCenter, yCenter, radius, color) {
    ctx.fillStyle = color;
    ctx.beginPath();
    ctx.arc(xCenter, yCenter, radius, 0, Math.PI * 2, true);
    ctx.fill();
}

//makeStrokeColorCircle(200, 200, 25, "purple");
//makeFillColorCircle(75, 200, 30, "red");

//makeStrokeColorRect(25, 25, 100, 50, "blue");
//makeFillColorRect(25, 100, 100, 50, "yellow");

//for(var i = 50; i <= 600; i+= 150) {
//    makeFillColorCircle(i, i, 50, "pink");
//}

const BRICK_WIDTH = 80;
const BRICK_HEIGHT = 20;
const BRICK_GAP_BETWEEN = 2;
const BRICK_COLUMNS = 10;
const BRICK_ROWS = 14;

for(var eachRow = 0; eachRow < BRICK_ROWS; eachRow++) {
    
    for(var eachCol = 0; eachCol < BRICK_COLUMNS; eachCol++) {
        makeFillColorRect(BRICK_WIDTH * eachCol, BRICK_HEIGHT * eachRow, BRICK_WIDTH - BRICK_GAP_BETWEEN, BRICK_HEIGHT - BRICK_GAP_BETWEEN, "purple");
    }

}