It is worth noting that the canvas drawing area is raster-based, meaning that it is made up of a grid of pixels. This sets it apart from the other drawing standard, SVG, which uses vector shapes and paths that are defined with points and mathematics.
The good news is that every current browser supports the canvas element as of this writing, with the exception of Internet Explorer 8 and earlier (see Note). It has become so well established that Adobe's Animate software (the replacement for Flash Pro) now exports to canvas format.
FIGURE 10-6 shows a few examples of the canvas element used to create games, drawing programs, an interactive molecule structure tool, and an asteroid animation.
The canvas Element
You add a canvas space to the page with the canvas element and specify the dimensions with the width and height attributes. And that's really all there is to the markup. For browsers that don't support the canvas element, you can provide some fallback content (a message, image, or whatever seems appropriate) inside the tags:
<canvas width="600" height="400" id="my_first_canvas"> Your browser does not support HTML5 canvas. Try using Chrome, Firefox, Safari or MS Edge. </canvas>
The markup just clears a space upon which the drawing will happen. You can affect the drawing space itself with CSS (add a border or a background color, for example), but all of the contents of the canvas are generated by scripting and cannot be selected for styling with CSS.
The Canvas API includes functions for creating shapes, such as strokeRect() for drawing a rectangular outline and beginPath() for starting a line drawing. Some functions move things around, such as rotate() and scale(). It also includes attributes for applying styles (for example, lineWidth, font, stroke-Style, and fillStyle).
Sanders Kleinfeld created the following code example for his book HTML5 for Publishers (O'Reilly). He was kind enough to allow me to use it in this book. FIGURE 10-7 shows the simple smiley face we'll be creating with the Canvas API.
Finally, here is a little more information on the Canvas API functions used in the example:
strokeRect(x1, y1, x2, y2) Draws a rectangular outline from the point (x1, y1) to (x2, y2).
By default, the origin of the canvas (0, 0) is the top-left corner, and x and y coordinates are
measured to the right and down.
beginPath() Starts a line drawing.
closePath() Ends a line drawing that was started with beginPath().
arc(x, y, arc_radius, angle_radians_beg, angle_radians_end) Draws an arc where (x,y) is the center of the circle, arc_radius is the length of the radius of the circle, and angle_radians_beg and _end indicate the beginning and end of the arc angle.
stroke() Draws the line defined by the path. If you don't include this, the path won't appear on the canvas.
fill() Fills in the path specified with beginPath() and endPath().
fillText(your_text, x1, y1) Adds text to the canvas starting at the (x,y) coordinate specified.
In addition, the following attributes were used to specify colors and styles:
lineWidth Width of the border of the path.
strokeStyle Color of the border.
fillStyle Color of the fill (interior) of the shape created with the path.
font The font and size of the text.
Of course, the Canvas API includes many more functions and attributes than we've used here. For a complete list, see the W3C's HTML5 Canvas 2D Context specification at www.w3.org/TR/2dcontext. A web search will turn up lots of Canvas tutorials should you be ready to learn more. In addition, I can recommend these resources:
• The book HTML5 Canvas, Second Edition, by Steve Fulton and Jeff Fulton (O'Reilly).
About the Author
Jennifer Niederst Robbins was one of the first designers for the Web. As the designer of O'Reilly's Global Network Navigator (GNN), the first commercial web site, she has been designing for the Web since 1993. She is the author of the bestselling Web Design in a Nutshell (O'Reilly), and has taught web design at the Massachusetts College of Art in Boston and Johnson and Wales University in Providence. She has spoken at major design and Internet events including SXSW Interactive, Seybold Seminars, the GRAFILL conference (Geilo, Norway), and one of the first W3C International Expos.
Do you want to build web pages but have no prior experience? This friendly guide is the perfect place to start. You'll begin at square one, learning how the web and web pages work, and then steadily build from there. By the end of the book, you'll have the skills to create a simple site with multicolumn pages that adapt for mobile devices.
Each chapter provides exercises to help you learn various techniques and short quizzes to make sure you understand key concepts.
This thoroughly revised edition is ideal for students and professionals of all backgrounds and skill levels. It is simple and clear enough for beginners, yet thorough enough to be a useful reference for experienced developers keeping their skills up to date.
• Build HTML pages with text, links, images, tables, and forms
• Use style sheets (CSS) for colors, backgrounds, formatting text, page layout, and even simple animation effects
• Create and optimize web images so they'll download as quickly as possible
• New! Use CSS Flexbox and Grid for sophisticated and flexible page layout
• New! Learn the ins and outs of Responsive Web Design to make web pages look great on all devices
• New! Become familiar with the command line, Git, and other tools in the modern web developer's toolkit
• New! Get to know the super-powers of SVG graphics.
Reader Robert V. says, "The HTML and CSS content in this book is great. It really contains almost everything that you'll use if you're building the HTML and CSS of a website from scratch. And if it doesn't have it, the provided resources will give you some hints as to where to go. Where I think this book really shines is in its emphasis of HTML as a purely semantic language. In other words, you really shouldn't be using HTML to get things to look a certain way. That is the job of CSS, and you can use CSS to achieve the look you want. (And this book will show you how.) I still see so many online tutorials that say things like "let's add an h1 tag around this text to make it look a little bigger." In addition to making your website code harder to follow, this mentality really messes with the accessibility of your site. For example, surveys report that up to 70% of screen reader users use headings as their primary way of finding information on a website. That means that they press the h key to listen to each heading to find the section they want to listen to. If you're not ensuring that each heading is used to describe the information that follows, and you're simply using a heading tag to make something look big, then you're making your site really difficult to navigate for people with visual impairments."
Learn more at amazon.com
More Graphics Design Tips:
• HTML5 Canvas
• How to Make a Simple Video
• Where To Find Free Stock Photography, Clip Art, And Other Graphics For Your Web Site
• Inkscpe Snap Controls Bar
• Draw Bezier SVG Drawing Application
• Use GIMP to Scale (Resize) an Image
• Inkscape Shadows and Highlights
• What is the Pantone Color System?
• Getting Started with Krita
• How to Create a Simple Video with Windows Movie Maker