Question: Actually, I want to implement a text box as shown in the figure:![enter image description here](https://i.stack.imgur.com/MD58j.png)

I want that the user should be able to enter the number in the required space. Note that it would be transparent so that the background is visible. A solution involving html5 canvas would also be good.

So, is it possible to do this? If so, how?

Answer: 
What have you tried so far? You pretty much answered your own question, make the input have a transparent background.

```
input {
    border: 0;
    outline: 0;
    background: transparent;
    border-bottom: 2px solid black;
    width: 20px;
}

```

[jsFiddle](http://jsfiddle.net/9wdUp/1/)
Set `<input>` border be only bottom side. [Here is the demo](http://jsfiddle.net/ijse/8ewq6/), just like your picture shows.