HTML5 Canvas Incrementing and Decrementing Value

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

Up Next
    Ebook Download
    View all
    Learn
    View all