Incrementing and decrementing a value using canvas in HTML5
This article describes how to increment and decrement value on clicking a button in HTML5 by using 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 drawings 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 = "#40ff40";
- 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
Join the conversation! Your thoughts help the community grow.