What is Html5 Canvas?

The <canvas> element is what is used to draw graphics in the browser. You can actually draw graphics inside of the canvas element. this is where a lot of people get confused. Actually, the canvas element is only the container that you use to draw the graphics in. You don’t do this manually, but you do it by using javascript. A canvas element is a rectangular area, in which you determine the size.

Getting Started with Html5 Canvas

It is important to remember to give the canvas element an ID that you can use in your javascript. Without javascript, there is no style applied to the canvas. There is no border or color. Also, the only way to display content without using javascript.

The canvas is set up with coordinates, just like the graphs that you used to do way back in school. There is an x and y axis, with the x value being left and right, and the y axis being up and down. The top left corner of the canvas element has the coordinates of (0, 0).

There are a few basic variables that you can use to draw shapes, lines, and text inside of the canvas element.

<script>
 var c = document.getElementById("Canvas");
 var ctx = c.getContext("2d");
 ctx.fillStyle = "#000000";
 ctx.fillRect(0,0,100,40);
 </script>

The first line of the script finds the canvas element by the Id that you assigned to it. The second line, is a built in object that must be defined, so that you can tell the html5 canvas to draw a rectangle, circle, a line, etc. The third line tells the canvas to fill the object with the color black. This can be a solid color, or a gradient. The third line tell the canvas to render a rectangle (fillRect), and the numbers within the parenthesis determine the coordinates of the rectangle, and its width and height. The first two numbers are the x and y coordinates. The last 2 numbers are the width and height of the rectangle in pixels. Below, you can see the results.

More to Come With Html5 Canvas

These aren’t the only parameters in html5 canvas. In the coming weeks, I will be delving into creating circles, line segments, and segments in html5. If you have any questions on what I’ve covered so far, feel free to leave them in the comments section below.