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 the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.