Post
Ask Question

HTML5 Canvas Incrementing and Decrementing Value

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
  1. function init()  
  2. {  
  3.   can = document.getElementById("can");  
  4.   ctx = can.getContext("2d");  
  5.   hun = document.getElementById("hundred");  
  6.   ctx.fillStyle = "#40ff40";  
  7.   ctx.textAlign = "center";  
  8.   ctx.textBaseline = "middle";  
  9.   ctx.font = "24pt Helvetica";  
  10.   showN();  
  11. } 
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. 
  1. function show()  
  2. {  
  3.    ctx.clearRect(0, 0, can.width, can.height, 99);  
  4.    ctx.fillText(n, can.width / 2, can.height / 2);  
  5. } 
Step 3
 
In order to increment the value we have defined an incr() function; see:
  1. function incr()  
  2. {  
  3.   n++;  
  4.   show();  
  5. } 
Step 4
 
And similarily, for decrementing the value we have defined the decr() function:
  1. function decr()  
  2. {  
  3.   n--;  
  4.   show();  
  5. } 
Step 5
 
Finally, for setting the value to 100 and performing the incrementing and decrementing operation on it:
  1. function setHundred()  
  2. {  
  3.   n = hun.value;  
  4.   show();  
  5. } 
Example
  1. <!DOCTYPE html>  
  2.    
  3. <html lang="en" xmlns="http://www.w3.org/1999/xhtml">  
  4. <head>  
  5.     <meta charset="utf-8" />  
  6.     <title>Buttons in html5</title>  
  7.     <meta name="viewport" content="width=300" />  
  8.     <meta name="viewport" content="initial-scale=2" />  
  9.     <style>  
  10.         input {  
  11.             font: larger bold;  
  12.         }  
  13.    
  14.         canvas {  
  15.             background-color: black;  
  16.         }  
  17.     </style>  
  18.     <script type="text/javascript">  
  19.         var can, ctx, hun, n = 0;  
  20.    
  21.         function init() {  
  22.             can = document.getElementById("can");  
  23.             ctx = can.getContext("2d");  
  24.             hun = document.getElementById("hundred");  
  25.             ctx.fillStyle = "#40ff40";  
  26.             ctx.textAlign = "center";  
  27.             ctx.textBaseline = "middle";  
  28.             ctx.font = "24pt Helvetica";  
  29.             show();  
  30.         }  
  31.    
  32.         function show() {  
  33.             ctx.clearRect(0, 0, can.width, can.height, 99);  
  34.             ctx.fillText(n, can.width / 2, can.height / 2);  
  35.         }  
  36.    
  37.         function incr() {  
  38.             n++;  
  39.             show();  
  40.         }  
  41.    
  42.         function decr() {  
  43.             n--;  
  44.             show();  
  45.         }  
  46.    
  47.         function setHundred() {  
  48.             n = hun.value;  
  49.             show();  
  50.         }  
  51.    
  52.     </script>  
  53. </head>  
  54. <body onload="init()">  
  55.     <canvas id="can" height="100" width="100"></canvas>  
  56.     <br />  
  57.     <input type="button" value=" + " onclick="incr()">  
  58.     <input type="button" value=" - " onclick="decr()">  
  59.     <select id="hundred" onchange="setHundred()">  
  60.         <option value="0">-- </option>  
  61.         <option value="100">100 </option>  
  62.         <option value="-100">-100 </option>  
  63.     </select>  
  64. </body>  
  65. </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


Similar Articles