Canvas Simple Shapes

Functionalized

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

/* take the loose shape code and make functions that can be called */

// 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();
}

// OLD COMMANDS TO MAKE FILL RECT
//canvasContext.fillStyle = "yellow";
//canvasContext.fillRect(20, 20, 150, 100);

// FUNCTION CALL FOR FILL RECT
// makeFillColorRect(20, 20, 150, 100);
makeFillColorRect(20, 20, 150, 100, "yellow");

// OLD COMMANDS TO MAKE STROKE RECT
//canvasContext.strokeStyle = "red";
//canvasContext.strokeRect(20, 140, 150, 100);

// FUNCTION CALL FOR STROKE RECT
//makeStrokeColorRect(20, 140, 150, 100);
makeStrokeColorRect(20, 140, 150, 100, "red");

// OLD COMMANDS TO MAKE STROKE CIRCLE
//canvasContext.strokeStyle = "blue";
//canvasContext.beginPath();
//canvasContext.arc(100, 75, 50, 0, Math.PI * 2, true);
//canvasContext.stroke();

// FUNCTION CALL FOR STROKE CIRCLE
//makeStrokeColorCircle(100,...