The above is a canvas made with <canvas></canvas>. When height and width are not specified, the browser creates a canvas 300 px wide and 150 px tall.
to create a black rectangle filling up the canvas. It was created by first creating a context object. We are rendering 2d graphics so the context object would be var context = document.getElementById("IdOfCanvas").getContext("2d");.
With the context object we can instuct the browser to render things. To draw a rectangle, you would use context.fillRect(x, y, width, height); where x and y represents the cordinates of the top left of the square. It's important to remember that the coordinate system on a canvas has (0,0) at the top left. This means the code used to render the above rectangle was context.fillRect(0, 0, firstCanvas.width, firstCanvas.height);.
to clear the canvas. This uses almost the exact same syntax except instead of context.fillRect(x, y, width, height); you would use context.clearRect(x, y, width, height);. By clearing a rectangle the size of the canvas, you can clear the entire canvas. This becomes especially useful when rendering animations.
The above canvas is styled with border: 1px solid black; to allow you to better see the border. Use the sliders below (or the input feilds) to see how the width and hiegt impacts the canvas.