| Tip 17 | Drawing a Logo on the Canvas |
Let’s begin our exploration of the HTML5 canvas by learning how to draw simple shapes and lines. Before we can draw anything, we have to add the <canvas> tag to our page. The <canvas> tag doesn’t do anything by itself. Adding one to our page gives us a blank slate we can draw on using JavaScript code. We define a canvas with a width and height like this:
| html5_canvas/canvas_simple_drawing.html | |
| | <canvas id="my_canvas" width="150" height="150"> |
| | Fallback content here |
| | </canvas> |
Unfortunately, you can’t use CSS to control or alter the width and height of a <canvas> element without distorting the contents, so you need to decide on your canvas dimensions when you declare it, or you need to adjust everything ...
Get HTML5 and CSS3, 2nd Edition 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.
