Alright let's get back to basics here. HTML5 Canvas is a very versatile element capable of both 2d and 3d graphics. It is used in majority of the eye-candy websites featured on websites like awwwards.com and siteinspire.com.
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:
- Create A Canvas
- Draw A Shape
- Calculate Transparency
Alright onto Step 1. Let's create a basic HTML Canvas.
<canvas height="500" width="500"/>
We're already at Step 2?
// 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.
// retrieving image data
const imageData = context.getImageData(0, 0, canvas.width, canvas.height).data;
Let's check the imageData
values.
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.
// 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.
// 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.
// 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.
Top comments (0)