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.
