HTML5 Canvas Element Guide. The HTML5 < canvas> element has a unique history.
Starting out as an Apple creation and dating back to 2. W3. C HTML5 spec, becoming one of the most interesting and exciting parts of HTML5.
This should help you get a firm fundamental understanding of canvas in preparation for creating something interesting and powerful with this unique HTML5 element. Definition and Markup. I can’t possibly define the canvas element better than the official W3. C spec, so I’ll just quote part of that document here: The canvas element provides scripts with a resolution- dependent bitmap canvas, which can be used for rendering graphs, game graphics, or other visual images on the fly. I also like the way Wikipedia describes its usage: Canvas consists of a drawable region defined in HTML code with height and width attributes. Java. Script code may access the area through a full set of drawing functions similar to other common 2. D APIs, thus allowing for dynamically generated graphics.
Citation Machine helps students and professionals properly credit the information that they use. Cite your website in MLA format for free.
Some anticipated uses of canvas include building graphs, animations, games, and image composition. As you can see already, this element has a bit of complexity to it. Let’s take it one step at a time, beginning with the markup. The markup for the canvas element looks like this: < canvas id=.
And because canvas requires scripting for its full capabilities, I’ve added an id attribute that will allow us to target it using either Java. Script or a Java.
Script web development library like j. Query or Moo. Tools. Once you have this basic markup, you can use CSS to make the canvas visible or, using CSS3 transition properties, move it around — the same as you would do with any other HTML element. You can add a border, padding, background color, margins, you can float the canvas, and assign CSS properties to it just like any HTML5 element.
Some Basic Scripting to Make It Work. To start drawing on a canvas, you need to first target itusing the Document Object Model (DOM). Since you can include more than one canvas element on any given page, this is where an ID attribute comes into play (in this case, our ID is my.
Canvas). Once the canvas is targeted, the get. Context Java. Script method needs to be called. This method identifies the context of the targeted canvas element, which means you will have access to the canvas drawing API. Here’s an example of code that draws an object on the canvas: var canvas = document. Element. By. Id(.
So don’t be intimidated, it’s pretty straightforward stuff. Here are some of the Java. Script methods associated with drawing rectangles: fill. Style(color. These methods define, by means of x and y coordinates, the start and end points of the lines, or paths, that will be drawn.
These methods, however, do not actually draw the visible lines; they prepare the canvas for the actual stroking of the lines that will occur when you call the stroke() method. Here’s a simple example: var canvas = document. Element. By. Id(. The last line of code uses the aforementioned stroke() method to stroke the path that was prepared on lines 3 and 4. Line 5 has the optional stroke.
Style method that can give the line a color, gradient, or pattern. If a stroke style is not declared, the line will be black by default. This is the line that is drawn by the code block above: Here are some further points to note about the drawing API: Coordinates that define paths and shapes can have decimal values, and this is encouraged to ensure line widths in certain circumstances are represented accurately. To draw multiple paths in multiple stroke styles, you use the begin. Path() method for each line, then the close. Path() method to end the path after it’s drawn.
You can draw any Unicode character onto a canvas element, utilizing the font, test. Align, and text. Baseline attributes to style and align the characters.
If you don’t use the typographic attributes on text, the text will display using CSS styles applied to the canvas element. Linear and Radial Gradients. In step with what is now possible in CSS3 in most modern browsers, the canvas drawing API allows you to fill your shapes and paths with two types of gradients. Here is an example showing a rectangle being filled with a linear gradient: var canvas = document. Element. By. Id(.
The first two arguments are the x and y coordinates that determine the starting point of the gradient; the second two arguments are the x and y coordinates that determine the end point of the gradient. After the gradient is created (but not drawn yet), color stops are added (lines 4- 5). Then the fill style is defined on the canvas context, and the gradient that is created on line 3 is added as the value of the fill (line 5). After line 5, everything is just stored in memory, waiting to be used on a shape or path. The last line makes the gradient visible by creating a shape on which to place the gradient. This is what the gradient looks like: Here are some notes on gradients: The position of the gradient is relative to the canvas, not the shape (which seems a little odd at first)To make a diagonal gradient across an entire shape, the coordinates of the gradient would be identical to the coordinates and size of the shape.
The first and last color stops in a linear gradient are represented by 0 and 1, respectively; any additional color stops are represented by decimal values in between 0 and 1. Putting a color stop at 5.
Radial gradients are created using the create. Radial. Gradients() method, which takes 6 arguments; the first 3 arguments create a circle for the starting point, and the last 3 create a circle for the end point. Other Methods and Properties Available.
What I’ve discussed so far are some of the methods and properties that are easier to deal with and understand. Canvas, however, has a much broader set of tools available in its drawing API. Here’s some of what’s available, with links to appropriate parts of the spec: Fallback Content. It’s strongly recommended that fallback content be used for non- supporting devices. Fallback content is included by putting them between the opening and closing < canvas> tags.
For example, you might have something like this. If, for whatever reason, canvas is unavailable, the user will see the fallback. That image will not display if canvas is supported. A Basic Code Template for Canvas. Mozilla’s Developer Center has a great “skeleton” template for drawing canvas elements.
This is the template with some minor modifications.< html>. Canvas< /title>. Run the draw() function. This isn’t very efficient because the DOM will be ready even before the entire window is loaded, so on heavier pages, our function will take longer than it should to execute. The better solution would be to use document. Event. Listener with the argument of DOMContent. Loaded, but this isn’t supported in Internet Explorer (which wouldn’t really matter until IE9).
If you use a Java. Script web development library like j.
Query, then they’ll usually have methods or functions to handle this for you (i. Another way to make this more efficient is to use inline Java. Script on the canvas element to call the draw function (as in < canvas on. Load=. We do this with an if/else control structure. If canvas. get. Context is not null, then we can assume canvas is supported and that it is ready to be worked on. Otherwise (else) we can run some code in the event that canvas is not supported (such as telling the user that the page requires a browser with canvas support). For CSS, we just draw a black border around the area of the canvas elements to make it easier to see.
Then, finally, the HTML just involves giving the canvas element an ID, width, and height. Browser and Mobile Device Support.
If you’re going to spend the time to create some sort of fallback content, then it would be good to know the extent of browser support for the canvas element and its associated scripting. Internet Explorer 9. Firefox 3. 0+Safari 3. Chrome 3. 0+Opera 1. Phone 1. 0+Android 1. What About Internet Explorer 6- 8? Using a third- party library called Explorer.
Canvas, canvas support is available in Internet Explorer 6 and up. All that’s required is to include a single Java.
Script file on any page that uses the canvas element. From my limited experience in running some example pages included with the Explore. Canvas library, IE’s rendering of canvas elements is very slow and resource- heavy, so unfortunately this workaround is not very inviting. Why Use Canvas? You might think that it’s a little counterproductive and counterintuitive to create simple objects using such complex means.
Canvas, however, should not be utilized for static object creation. Canvas is best used for drawing objects dynamically according to user input, or for updating the display of objects that are dependent on some kind of a dynamic feed of information (such as real- time stock market fluctuations visualized through a line graph). HTML5 Canvas Examples.
Although I’m not a huge fan of experimental techniques, it may be of value at this point to show what is possible with the canvas element. Here are a few examples of apps and other experiments that do some interesting and downright cool stuff with HTML5 canvas: A virtual fish tank in your browser using attractive fish built without any graphic files. It has realistic fish movements and bubbles. Click on the tank to add as many fish as you want! An experiment taking HTML5 canvas to the next level. Each of the circle you see in the background is a Twitter user. Click on a circle and you’ll see more information about that user.
A little experiment that loads 1. HTML5 and displays them using a Java. Script- based particle engine.
Each particle represents a tweet — click on one of them and it will appear on the screen. The international Billiards Tournament is being infiltrated by the terrorist organization CHALK.
Do not let them win! Sink as many balls as possible before the timer runs out. This demo is an implementation of a full 8- bit color cycling engine, rendered into a 3.