Chapter 13Canvas & SVG: Canvas Basics

First of all, let's look at how to create a canvas document. As noted earlier in this book, the canvas element itself looks like this:

<canvas id="MyCanvas" width="300" height="150"></canvas>

HTML5 Canvas Template

Let's start with a basic template that we can use to begin working with. We'll add the canvas element to the page and a small self-executing script that gets the context:

<html> <head> <title>Getting started with Canvas</title> <style type="text/css"> canvas { border: 1px solid black; } </style> </head> <body> <canvas id="MyCanvas" width="300" height="150"></canvas> <script> (function() { var canvas = document.getElementById('MyCanvas'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); ...

Get Jump Start HTML5 now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.