You're reading from Professional JavaScript for Web Developers Discover an easy-to-learn guide to upgrade your JavaScript skills

Product type Paperback

Published in Nov 2019

Publisher Wiley

ISBN-13 9781119366447

Length 1144 pages

Edition 4th Edition

Languages

JavaScript

Tools

Combine

Concepts

Web Programming

Author (1):

Matt Frisbie

View More author details

Table of Contents (37) Chapters

COVER FREE CHAPTER

FOREWORD

INTRODUCTION

1 What Is JavaScript?

2 JavaScript in HTML

3 Language Basics

4 Variables, Scope, and Memory

5 Basic Reference Types

6 Collection Reference Types

7 Iterators and Generators

8 Objects, Classes, and Object-Oriented Programming

9 Proxies and Reflect

10 Functions

11 Promises and Async Functions

12 The Browser Object Model

13 Client Detection

14 The Document Object Model

15 DOM Extensions

16 DOM Levels 2 and 3

17 Events

18 Animation and Graphics with Canvas

19 Scripting Forms

20 JavaScript APIs

21 Error Handling and Debugging

22 XML in JavaScript

23 JSON

24 Network Requests and Remote Resources

25 Client-Side Storage

26 Modules

27 Workers

28 Best Practices

A ES2018 and ES2019

B Strict Mode

C JavaScript Libraries and Frameworks

D JavaScript Tools

INDEX

END USER LICENSE AGREEMENT

18
Animation and Graphics with Canvas

WHAT'S IN THIS CHAPTER?

Using requestAnimationFrame
Understanding the <canvas> element
Drawing simple 2D graphics
3D drawing with WebGL

Graphics and animation in the browser are an increasingly essential component of the modern web, but they are also extremely difficult to do well. Visually complicated features require performance tuning and hardware acceleration so that they don't slow down the browser. An increasingly robust suite of APIs and tools allows for development of such features.

Arguably, HTML5's most popular addition is the <canvas> element. This element designates an area of the page where graphics can be created, on the fly, using JavaScript. Originally proposed by Apple for use with its Dashboard widgets, <canvas> quickly was added into HTML5 and found a very fast adoption rate by browsers. All major browsers support <canvas> to some degree.

Similar to the other parts of the browser environment...