Incrementing and decrementing a value using canvas in HTML5
This article describes how to increment and decrement a value on clicking a button in HTML5 by using a canvas.
One of the common uses would be a "quantity" input on an E-Commerce site.
In order to make buttons easy to find we can:
- try setting a smaller viewport.
- a larger initial scale using the
<meta> tag.
- making the button font larger using the CSS
font style.
In the example given below we first set the viewport width to 300, then we set the initial scale to 2. In the style tag we increase the size of the font and make it bold and we also set the canvas background color to blue.
In the script tag we define various functions or methods, such as init(), show(), incr(), decr() and setHundred() methods.
Step 1
All the drawing on the canvas must be done inside JavaScript. In the init() methods we define:
function init()
{
can = document.getElementById("can");
ctx = can.getContext("2d");
hun = document.getElementById("hundred");
ctx.fillStyle = "rgb(64, 255, 64)";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.font = "24pt Helvetica";
showN();
}
First, we find the <canvas> element, as in:
can = document.getElementById("can");
Then, call its getContext(), as in:
method ctx = can.getContext("2d");
The getContext("2d") object is a built-in HTML5 object, with a large number of properties and methods for drawing paths, boxes, circles, text, images, and more.
Step 2
In the show() method we will use clearRect() to clear the rectangle. As the clearRect() method clears the canvas to transparent black, clearRect uses percentages of the canvas width and height to create a frame.
function show()
{
ctx.clearRect(0, 0, can.width, can.height, 99);
ctx.fillText(n, can.width / 2, can.height / 2);
}
Step 3
In order to increment the value we have defined an incr() function; see:
function incr()
{
n++;
show();
}
Step 4
And similarily, for decrementing the value we have defined the decr() function:
function decr()
{
n--;
show();
}
Step 5
Finally, for setting the value to 100 and performing the incrementing and decrementing operation on it:
function setHundred()
{
n = hun.value;
show();
}
Example
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Buttons in html5</title>
<meta name="viewport" content="width=300" />
<meta name="viewport" content="initial-scale=2" />
<style>
input {
font: larger bold;
}
canvas {
background-color: black;
}
</style>
<script type="text/javascript">
var can, ctx, hun, n = 0;
function init() {
can = document.getElementById("can");
ctx = can.getContext("2d");
hun = document.getElementById("hundred");
ctx.fillStyle = "rgb(64, 255, 64)";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.font = "24pt Helvetica";
show();
}
function show() {
ctx.clearRect(0, 0, can.width, can.height, 99);
ctx.fillText(n, can.width / 2, can.height / 2);
}
function incr() {
n++;
show();
}
function decr() {
n--;
show();
}
function setHundred() {
n = hun.value;
show();
}
</script>
</head>
<body onload="init()">
<canvas id="can" height="100" width="100"></canvas>
<br />
<input type="button" value=" + " onclick="incr()">
<input type="button" value=" - " onclick="decr()">
<select id="hundred" onchange="setHundred()">
<option value="0">-- </option>
<option value="100">100 </option>
<option value="-100">-100 </option>
</select>
</body>
</html>
Output
Image 1
Originally we get:
![incdec.jpg]()
Image 2
On clicking the Plus (+) button we get:
![incdec3.jpg]()
Image 3
On clicking the Minus (-) button we get:
![incdec4.jpg]()
Image 4
On Clicking the drop-down list we get:
![incdec5.jpg]()