-
HTML5: The mysteries of the canvas element
3D Landscape with HTML5 Canvas
The canvas element is probably one of the best new elements in HTML5. With the canvas element, you can draw 2D shapes and bitmap images - think of it as a blank rectangle on your page that you can draw on. It can be used to generate graphs, animations, images and even games. To be fair, drawing on a canvas isn’t as easy as you think. It’s not just HTML, you’ll need to know a bit of Javascript. Luckily, there are tons of resources at your disposal.What can you draw on a canvas element?
- Rectangles
- Arcs
- Paths
- Lines
- Curves
What type of effects can you apply?
- Fills
- Strokes
- Shadows
- Gradients
- Transparency
- Image Compositing
What type of transformations can you use?
- Scaling
- Rotation
- Translation
Can I import resources into my canvas?
Yep. You can import images via URI, other canvases or data URIs.
Can I export my canvas?
Yes! Browsers offer a data URI representation of your image. So if you right click on the image object, you can save the canvas as a PNG image.
What happens if the user’s browser doesn’t have canvas support?
No worries. Whatever HTML code you place in between the <canvas> element will be displayed to the user.
Example
<canvas id=”my-canvas” width=”300” height=”500”>
<h1>Your browser does not support the HTML5 canvas element.</h1>
<p><a href=”http://www.google.com/chrome”>Download Google Chrome for free now!</a></p>
</canvas>
In the above example, any browser that supports the canvas element will display the canvas as expected - without the message. Browsers that don’t support the canvas element will display the message alerting the user that they need to upgrade their browser. A great alternative is to display a fallback image.What are some great examples of possibilities with the canvas element?
3D Landscape with HTML5 Canvas
http://sebleedelisle.com/demos/html5landscape.html
CoverFire
http://www.wiicade.com/playJSGame.aspx?gameID=1317&gameName=Coverfire
CanvasPaint
http://canvaspaint.orgHow can I get started learning how to use the canvas element?
Doing a quick google search will get you lots of results. You can go through them if you want, but here are my favorite resources. These got me in the right direction, and they’ll probably be more than enough for you.
Mozilla Developer Network
https://developer.mozilla.org/en/canvas_tutorial
Absolutely everything that you need is here. From basic usage to animations, you’ll learn everything here. The tutorials aren’t THAT great, but the documentation will certainly help you.
Dive Into HTML5
http://diveintohtml5.org/canvas.html#divingin
This is a great “article” on how to use the canvas element. It reads like a book, too.
HTML5Tutorial
http://html5tutorial.net/examples/canvas-examples.html
Great code snippets and examples of what can be done with the canvas element.
WHATWG
http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#the-canvas-element
The complete draft to the canvas element. Absolutely EVERYTHING you need to know about the canvas element is in this page. It doesn’t read that well, but you won’t find better documentation than this.
BillMill
http://billmill.org/static/canvastutorial/
A step by step tutorial showing you exactly how to do some basic and some advanced drawing with the canvas element.
-
herberrt1 liked this
-
raphaelcaixeta posted this
