Create a CSS-like button with HMTL5 canvas element using gradient

Canvas is maybe one of the most interesting HTML5 feature. It has all you need to create rich web applications or games.

We talked about how to Generate gradient image with PHP some time ago.
Now we’re gonna use HMTL5 canvas element to draw a simple button with a gradient effect, using it’s 2D context API.

First step is to create a simple html file with a canvas element(we set the width to 100 pixels and height to 50 pixels and we’re gonna identify it with the “gradientCanvas” id):

<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
</head>
<body>
<div id="main-content">
	<div class="canvas_button">
		<a href="#">
		<canvas  width="100" height="50" id="gradientCanvas">
			Your browser does not support HTML5 Canvas.
		</canvas>
		</a>
	</div>
</div>
</body>
</html>

Next step is to create the drawCanvas1() Javascript function, which will draw inside de canvas element an up-down gradient starting with blue and ending with white:

function drawCanvas1()
{
	var gradientCanvas = document.getElementById('gradientCanvas');
	var context = gradientCanvas.getContext('2d');
	var myGradient = context.createLinearGradient(0, 0, 0, 60);
	myGradient.addColorStop(0, 'blue');
	myGradient.addColorStop(1, 'white');
	context.fillStyle = myGradient;
	context.fillRect(0, 0, 100, 50);
}

We use the getContext() method, which returns an object that exposes an API for drawing on the canvas. The API used in this example is ‘2d’.
The createLinearGradient() method allows us to set the direction of gradient object(named here myGradient) by specifying the x,y coordinates of start point of the gradient and the end point.
Because we use white as end color, we set the ending y coordinate to 60(greater than the height of canvas – i.e. 50 pixels) in order to clearly see the edge of the canvas
The addColorStop() method is used to set the colors of the gradient. First argument can take float values from 0.0 to 1.0, which represents the position between the start and end points of the gradient.

We call the function when the document is loaded:

<body onload="drawCanvas1();">

And now we should see something like this:

To add the hover CSS-like effect, we create a second function, called drawCanvas2(), similar to previous function:

function drawCanvas2() 
{	
	
	var gradientCanvas = document.getElementById('gradientCanvas');
	var context = gradientCanvas.getContext('2d');
	var myGradient = context.createLinearGradient(0, -10, 0, 60);
	myGradient.addColorStop(0, 'lightgray');
	myGradient.addColorStop(0.5, 'blue');
	myGradient.addColorStop(1, 'white');
	context.fillStyle = myGradient;
	context.fillRect(0, 0, 100, 50);
}

and set the onmouseover=”drawCanvas2()” and onmouseout=”drawCanvas1()” events for the canvas:

<canvas  onmouseover="drawCanvas2()" onmouseout="drawCanvas1()" width="100" height="50" id="gradientCanvas">

Now we should have a simple button created with the HTML5 canvas element.
To add text we simply add the following lines at the and of both drawCanvas1() and drawCanvas2() functions, which sets the color for the text fill(line 1), the vertical alignment of the text(line 2), font style(line 3) and finally draws the text, starting from x,y coordinates specified as 2nd and 3rd arguments(line 4):

context.fillStyle    = 'white';
context.textBaseline = 'top';
context.font         = 'bold 30px sans-serif';
context.fillText('Home', 10, 10);

We should now have a simple button created with canvas element:

Hope you’ll enjoy this short introduction. Feel free to comment.

The complete html file containing both javascript and a bit of css is available here.

Online Solutions Development Blog |

RSS