What is Html5 Canvas?
Getting Started with Html5 Canvas
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.