JavaScript Bitmap Graphics with Canvas

Since the introduction of Canvas into HTML, JavaScript has been a first class language for graphics allowing you to create graphics without resorting to a library of any kind.

This book is all about programming Canvas. Like many books and online resources, it covers the basics of using Canvas, but it also goes into many of the skills that you need to make good use of these facilities. For example, a graphics application often needs to download or upload files, but exactly how to do this in a modern way is difficult to find out. If you do upload a file then you might want to work with it at the pixel level and this requires working with raw binary data. How do you do this in JavaScript, which tries hard to keep data types hidden from the programmer?

As far as the user is concerned, there is also the issue of how to keep graphic processes from bringing your application to a halt. You need to keep graphics on a separate thread or use the GPU to get the job done, or both.

Although most of the book is concerned with the standard 2d graphics context, the final chapters explain the use of WebGL with Canvas as a general purpose rendering engine, including how to use it for 3D graphics and for fast 2D graphics.

What you will learn:

The canvas element and the fundamental ideas of a path and its stroke and fill properties

Transformations - organizing and using unit shapes as the building blocks for complex graphics

Working with text including typography and SVG d104

Clipping, compositing and effects

The Image object as a source of bitmaps

Image loading and saving using async and await

Sprite-based animation using web workers and Offscreencanvas

Files blobs and the Fetch API

Image processing, filters and convolution

Using Canvas with WebGL for 3D graphics display

Using WebGL to implements fast 2D graphics

Ian Elliot is a core member of the I Programmer team where he writes on all aspects of web development. This is his fifth book on JavaScript. The others are Just JavaScript: An Idiomatic Approach; JavaScript Async: Events, Callbacks, Promises and Async Await, Just jQuery: The Core UI and Just jQuery: Events, Async & AJAX.