Info on canvas drawing

The canvas element is a HTML element that can be used to display graphics by JavaScript. This is useful as dimensions can be calculated and the user's screen dimensions can be used to make it responsive. You can use native methods (or functions) to draw polygons, rectangles, circles, etc. You can also use your own mathematical knowledge to graph equations, draw sine waves and other geometric constructions.

See the below links for learning about canvas drawing:

Canvas tutorial Canvas tutorial 2 Canvas reference

You can draw rectangles and rectangle outlines using this code:

var canvas = document.getElementById("canvas_element_id");//get the canvas element reference
var ctx = canvas.getContext("2d");//use this to draw anything in 2D
ctx.fillStyle = "color";//specifies color to color shapes e.g. white or #e5e5e5 or rgb(255,0,0)
ctx.fillRect(x, y, width, height)//this will draw a rectangle with the specified position and dimensions
ctx.strokeStyle = "color";//specifies color to outline shapes e.g. white or #e5e5e5 or rgb(255,0,0)
ctx.strokeRect(x, y, width, height)//this will draw a rectangle outline with the specified position and dimensions

See the tutorial for how to draw further shapes