HTML and CSS Reference
In-Depth Information
if (!Modernizr.canvas) {
alert("This browser doesn't support HTML5 Canvas!");
}
});
</script>
<style>
canvas {
border: 2px solid #808080;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<canvas id="MyCanvas" height="200" width="200"></canvas>
</form>
</body>
The markup in Listing 4-1 declares an HTML5 canvas using a <canvas> element. Although they're
optional, the width and height of the canvas are also set to mark the dimensions of the canvas. If you don't
specify dimensions for a canvas, the browser creates a canvas with the default width and height. For
example, if dimensions aren't specified, Firefox and Google create a canvas with a width of 300 pixels and a
height of 150 pixels. The <head> section also contains jQuery code that checks for canvas support using
Modernizr. The <style> section adds a border to the canvas so its boundaries can be seen on the web page.
Figure 4-1 shows how the canvas looks.
Figure 4-1. Basic canvas rendered in a browser
Drawing on the Canvas
In order to draw anything on the canvas, you need to get its drawing context. A drawing context is an
object that provides methods and properties for drawing graphics on the canvas. Any changes to the
context properties are applied to subsequent drawing operations. Additionally, you can perform different
drawing operations using different context objects.
 
Search WWH ::




Custom Search