Canvas lets you work with bitmaps as well as generate custom drawings. In this extract from a chapter in my new book on JavaScript Graphics we look at the basics of how to transfer bitmaps to Canvas.

Now available as a paperback or ebook from Amazon.

JavaScript Bitmap Graphics
With Canvas

Contents

1. JavaScript Graphics
2. Getting Started With Canvas
3. Drawing Paths
     Extract: Basic Paths
     Extract: SVG Paths
     Extract: Bezier Curves
4. Stroke and Fill
     Extract: Stroke Properties 
     Extract: Fill and Holes
     Extract: Gradient & Pattern Fills
5. Transformations
     Extract: Transformations
     Extract: Custom Coordinates 
     Extract  Graphics State
6. Text
     Extract: Text, Typography & SVG 
     Extract: Unicode
7. Clipping, Compositing and Effects
     Extract: Clipping & Basic Compositing
8. Generating Bitmaps
     Extract:  Introduction To Bitmaps
     Extract :  Animation 
9. WebWorkers & OffscreenCanvas
     Extract: Web Workers
     Extract: OffscreenCanvas
   
10. Bit Manipulation In JavaScript
      Extract: Bit Manipulation
11. Typed Arrays
      Extract: Typed Arrays **NEW!
12. Files, blobs, URLs & Fetch
      Extract: Blobs & Files
      Extract: Read/Writing Local Files
13. Image Processing
      Extract: ImageData
      Extract:The Filter API
    
14. 3D WebGL
      Extract: WebGL 3D
15. 2D WebGL
    Extract: WebGL Convolutions

<ASIN:1871962625>

<ASIN:B07XJQDS4Z>

<ASIN:1871962579>

<ASIN:1871962560>

<ASIN:1871962501>

<ASIN:1871962528>

Bitmaps, gifs, jpegs and so on are common in almost all web pages. With Canvas you now work with bitmaps at the pixel level. It's not difficult, but you need to organize things to make it really easy and a good understanding helps.

Our first challenge is to find out how to get bitmaps into the system so that they can be used by JavaScript, and Canvas in particular.

The Image Object

The most basic way of getting an image into a web page is the img tag:

<img src=url width="100" height="200">

This loads the bitmap specified by the url into the web page and displays it at 100 by 200 pixels irrespective of its actual size.

If you want to work with an img tag in JavaScript then you need to work with the HTMLImageElement DOM object. Assuming the img tag is:

<img id="myImage" src=url width="100" height="200">

then you can get a reference to the HTMLImageElement using:

var img1=document.getElementById("myImage");

Now you can access the properties including height, width and naturalHeight, naturalWidth which give you the actual size of the bitmap.

You can use an HTMLImageElement that has been created in this way as the source of a bitmap to use with Canvas, but the problem is that the tag will be loaded along with the page and displayed.

If you want to load a bitmap into an HTMLImageElement using JavaScript then you have to use the well known idiom of creating the element and then setting its src property.

For example:

var img1=document.createElement("img");

creates an HTMLImageElement. You can start it loading a bitmap using:

img1.src=url;

If you just do this the bitmap will be loaded, but not displayed as the new HTMLImageElement isn't part of the DOM. To make it visible you have to add it to the DOM using one of the many methods provided for doing this. For example:

document.body.appendChild(img1);

Where the bitmap appears depends on where it is added to the DOM. How big the image is displayed depends on what you set the height and width properties to. If you don't set them then the image is displayed at its full size, i.e. naturalHeight, naturalWidth.

There is a slightly simpler way of doing the same job. The JavaScript Image object is in fact a wrapper for the HTMLImageElement DOM object and:

var img1 = new Image(w,h);

is exactly equivalent to:

var img1=document.createElement("img");
img1.width=w;
img1.height=h;

If you leave out w and h then the natural size of the bitmap is used. If you leave out h then the height is scaled correctly for the given w. So to load an image into an HTML page you might use something like:

var img1 = new Image(200);
img1.src = "jeep.jpg";
document.body.appendChild(img1);

Notice that if you don't want the image to show in the web page you can simply not add it to the DOM.

This works, but if you want to go on to process the image using JavaScript you cannot simply continue writing instructions. The image takes time to load and you cannot process it before it is finished loading. For example, suppose you wanted to scale the loaded image to 1/10th its natural size. If you try:

var img1 = new Image();
img1.src = "jeep.jpg";
img1.width = img1.naturalWidth / 10;
img1.height = img1.naturalHeight / 10;
document.body.appendChild(img1);

you will find that it doesn't work.