JavaScript Bitmap Graphics With Canvas

Buy from:  Amazon

Errata 

largecover360

  

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 Text

  • 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.

  • Paperback: 316 pages
  • Publisher: I/O Press (September 9, 2019)
  • Language: English
  • ISBN-10: 1871962625
  • ISBN-13: 978-1871962628

Programs - Live Listings

Errata: 

Page 80

the formula p'=Tp+t should be p'=Tp

Page 109

Notice that while some graphics systems treat drawing outside of the rendering window as an error, Canvas clips the graphic to the rending window.

change to:

Notice that while some graphics systems treat drawing outside of the rendering window as an error, Canvas clips the graphic to the rendering window.

 

General

To avoid cross origin problems you cannot use the JavaScript URL object. The URL to load a bitmap has to be relative.

Change lines like

var url = new URL("jeep.jpg", "http://host/Filter/");
img.src = url;

to

img.src = "relative path/jeep.jpg";

This is best regarded as a browser bug as both URLs are to the same origin but both Chrome and Firefox treat the url in the URL object as different even though it is to the same origin.