Blog › HTML5, Percentage fill image

HTML5, Percentage fill image

Being predominately an Actionscript developer I’m not one of the people getting over excited by HTML5 and the hype surrounding it, especially considering its suggested timeline. But I won’t get onto that already exhausted subject.

I think it’s important to understand the capabilities of technologies to make the right calls on which is appropriate for each project. So I’ve started having a bit of a tinker with HTML5 and really gone back to basics! To have a play with the canvas I messed around with doing a coloured percentage fill on an image.

I came up with 2 solutions; colouring the pixels of part of the image and combining a cropped coloured version of the image and the original.

Colouring pixels

window.addEventListener('load', function () {

//get canvas
var elem = document.getElementById('percent');

//if canvas doesn't exist or canvas methods not supported abort
if (!elem || !elem.getContext) {
 	return;
}

//get 2D context
var context = elem.getContext('2d');

//if context doesn't exist or context methods not supported abort
if (!context || !context.drawImage || !context.putImageData || !context.getImageData) {
 	return;
}

//load image
var b = new Image();
b.addEventListener('load', function() {

	//get number out of canvas and strip out non-numerals
	var p = elem.innerHTML;
	p = p.match( /\d+/g ).join('');
	var h = parseInt((p / 100) * b.height);

	//draw base image
	context.drawImage(b, 0, 0, b.width, b.height);

	//get pixels from point where percent starts
	var iData = context.getImageData( 0, b.height - h, b.width, h);
	var pixels = iData.data;

	//for every pixel that isn't white draw a pink pixel
	for (var i = 0; n = pixels.length, i < n; i += 4)
	{
		if(pixels[i] < 255 && pixels[i+1] < 255 && pixels[i+2] < 255)
		{
			pixels[i] = 255;
			pixels[i+1] = 0;
			pixels[i+2] = 64;
		}
	}

	//add the new data to the context bottom aligned
	context.putImageData(iData, 0, b.height - h);

}, false);
b.src = 'bird.png';

}, false);

Cropped

window.addEventListener('load', function () {

//get canvas
var elem = document.getElementById('percent');

//if canvas doesn't exist or canvas methods not supported abort
if (!elem || !elem.getContext) {
	return;
}

//get 2D context
var context = elem.getContext('2d');

//if context doesn't exist or context methods not supported abort
if (!context || !context.drawImage) {
	return;
}

//load base image
var b = new Image();
b.addEventListener('load', function() {
	//draw base image
	context.drawImage(b, 0, 0, b.width, b.height);
}, false);
b.src = 'bird.png';

//load pink image
var f = new Image();
f.addEventListener('load', function() {

	//get number out of canvas and strip out non-numerals
	var p = elem.innerHTML;
	p = p.match( /\d+/g ).join('');
	var h = parseInt((p / 100) * f.height);

	//draw highlight image from point where percent starts
	context.drawImage( f, 0, f.height - h, f.width, h, 0, f.height - h, f.width, h );
}, false);
f.src = 'bird-pink.png';

}, false);