Calculating Transparency of an HTML5 Canvas

March 2023

•

3 minutes

Alright let's get back to basics here. HTML5 Canvas is very versatile and capable of both 2D and 3D graphics. It is used abundantly in the eye-candy websites featured on awwwards and siteinspire.

While building one of my older portfolio websites, I built a drawable background that auto-fills once half the Canvas has been drawn on. In order to make this work, I had to calculate the transparency percentage of the Canvas.

You wouldn't believe how simple this can be.

For this article, we'll need to:

  1. Create A Canvas
  2. Draw A Shape
  3. Calculate Transparency

Alright onto Step 1. Let's create a basic HTML Canvas.

html
<canvas height="500" width="500"/>

We're already at Step 2?

js
// get the context
const canvas = document.querySelector("canvas");
const context = canvas.getContext("2d");

// add a shape
context.fillStyle = "#000000";
context.fillRect(0, 0, canvas.height/2, canvas.width/2);

Step 3. Finally we get to write some logic.

js
// retrieving image data
const imageData = context.getImageData(0, 0, canvas.width, canvas.height).data;

Let's check the imageData values.

js
console.log('imageData', imageData);

// we get the following array of 1000000 values
// [0, 0, 0, 255, 0, 0, 0, 255............, 1, 1, 1, 255, 1, 1, 1, 255]

As you might have guessed, these are rgba values of each pixel in the canvas, defining the Red, Green, Blue, and Alpha (transparency) values respectively. Each value ranges from 0 to 255.

What we have to focus on here, is the Alpha values. So let's isolate them.

js
// removing every non-4th value (rgb values)
let alphaValues = imageData.filter((value, index) => index % 4 === (4 - 1));

The method to calculate transparency is pretty simple, we just need the transparent pixels and the total pixel count.

js
// reworking the filter to remove non-zero alpha values as well
let alphaValues = imageData.filter((value, index) => index % 4 === (4 - 1) && value === 0);

// get the maximum pixel count
const maxPixels = canvas.width * canvas.height;

Now for the finale, let's calculate the transparency ratio and convert it to a percentage.

js
// tada!
const percentage = (alphaValues.length / maxPixels) * 100;

// a good old fashioned console.log()
console.log(`${percentage}%`);
// "75%"

That's all folks, told ya it was simple.