First Shape

As I stated before, the canvas element is part of the HTML5 specification and provides developers with an API for manipulating pixels on the screen. So what does this look like exactly?

This code can be split up into different elements. First the HTML declaration tells browsers the code that follows should be treated as HTML, specifically, HTML5 is the browser has implemented any of the features in the specification. The head section contains metadata about the character encoding(utf-8 in this case), the initia viewport (for mobile devices and reponsive design), a title(appears either on the tab or across the top of the browser), and a simple style that places a gray border around the canvas element.

Within the body element, you see the actual canvas element, with an id, width, and height. By initializing the size ordinates outside of this(e.g., 280, 280) will not show up on the canvas.

Lastly, we have the code that actually does something with the canvas. Because the JavaScript block is executed after the canvas element is declared, the code will execute. However, if the code were in the head element, this code would throw an error because of the way in which DOM elements are loaded. another way to handle loading the JavaScript is with a listener that waits until the page has loaded, or even using a library such as jQuery that will wait until the page has loaded and then execute the script. However, for clarity, I am placing the code at the bottom of the page and executing it there.

The Javascript create a new canvas variable that selects the canvas element by using the DOM canvas id. It then create a context element by declaring the canvas to be two dimensional. At this point, we have tapped into the Canvas API, and have access to a vast library of tiems with which to work. In this case, we want to set a fill style(boring "gray" because it prints well), and draw a rectangle that has a margin on each side of 30 pixels, and is 200pixels wid in both tha x-and y-directions.

The result is the exciting square in browsers that support the canvas element.