© Jeanine Meyer 2018
Jeanine MeyerHTML5 and JavaScript Projectshttps://doi.org/10.1007/978-1-4842-3864-6_1

1. Building the HTML5 Logo: Drawing on Canvas with Scaling and Semantic Tags

Jeanine Meyer1 
(1)
New York, USA
 
In this chapter, you will learn the following:

  • Drawing paths on a canvas

  • Placing text on a canvas

  • Coordinate transformations

  • Fonts for text drawn on canvas and fonts for text in other elements

  • Semantic tags

  • The range input element

Introduction

The project for this chapter is a presentation of the official HTML5 logo, with accompanying text. The shield and letters of the logo are drawn on a canvas element and the accompanying text demonstrates the use of semantic tags. The viewer can change the size of the logo using a slider input device. It ...

Get HTML5 and JavaScript Projects: Build on your Basic Knowledge of HTML5 and JavaScript to Create Substantial HTML5 Applications 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.

Start your free trial