Canvas Simple Shapes

No CSS

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

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

canvasContext.fillStyle = "yellow";
canvasContext.fillRect(20, 20, 150, 100);

canvasContext.strokeStyle = "red";
canvasContext.strokeRect(20, 140, 150, 100);

canvasContext.strokeStyle = "blue";
canvasContext.beginPath();
canvasContext.arc(100, 75, 50, 0, Math.PI * 2, true);
canvasContext.stroke();

canvasContext.fillStyle = "green";
canvasContext.beginPath();
canvasContext.arc(250, 75, 50, 0, Math.PI * 2, true);
canvasContext.fill();
/*
 * RECTANGLE
 * fill or stroke style to set color (none will default black)
 * top left corner x, y placement of rectangle
 * width and height of rectangle you want
 * strokeRect(x, y, width, height) for color outlined rectangle
 * fillRect(s, y, width, height) for color filled rectangle
 *
 * CIRCLE
 * fill or stroke style to set color (none will default black)
 * begin path helper function will create a new shape (not connected to previous)
 * arc (which can make a full circle) center specified by x, y
 * radius is radius of arc (which can make a full circle)
 * 0 through Math.PI * 2 will make a full circle
 * 0 through Math.PI will make a half circle etc.
 * true or false will draw arc pieces clockwise or counter-clockwise
 * fill() or stroke() will perform the draw on screen
 *
 * !! Note order is how it will draw on canvas !!
 * !! Color choice will flow down unless changed in code !!
 */