---
title: "How to create Pixel Counter in JavaScipt?"  
description: "How to create Pixel Counter in JavaScipt?"  
author: "Ravi Misra"  
published: 2022-12-16  
canonical: https://www.mindstick.com/interview/33859/how-to-create-pixel-counter-in-javascipt  
category: "javascript"  
tags: ["javascript"]  
reading_time: 2 minutes  

---

# How to create Pixel Counter in JavaScipt?

I am write code in `JavaScript` and `HTML` language.

```html
<!doctype html>
<html lang='en'>
  <head>
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link href='https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css' rel='stylesheet'>
    <link href='https://getbootstrap.com/docs/5.2/assets/css/docs.css' rel='stylesheet'>
    <title> 'Bootstrap Example'</title>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js'></script>
    <script src='https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js'></script>
  </head>
  <body class='container mt-5'>

    <!-- Example Code -->
    <div class='row g-2'>

      <p>&nbsp; Is ravan exit in th world?</p>

      <div class='col-12 text-center'>
          <h1>Pixel Counter</h1>
      </div>

      <div class='col-12'>
        <label for='exampleFormControlTextarea1' class='form-label fw-bold d-flex'>
          Enter Text
          <span class='ms-auto text-danger word-conter'>0</span>
        </label>
        <textarea class='form-control' id='' rows='3'></textarea>
      </div>

      <div class='col-12'>
        <label class='form-label fw-bold'>
          Pixel Width : <span class='in-pixel'>0</span>
        </label>
      </div>

      <div class='col-12'>
        <label for='exampleFormControlTextarea1' class='form-label fw-bold d-flex'>
          Font Size
        </label>
        <select class='form-select'>
            <option value='10'>10</option>
            <option value='11'>11</option>
            <option value='12'>12</option>
            <option value='13'>13</option>
            <option value='14'>14</option>
            <option value='15'>15</option>
            <option value='16'>16</option>
            <option value='17'>17</option>
            <option value='18'>18</option>
            <option value='19'>19</option>
            <option value='20'>20</option>
        </select>
      </div>
    </div>


  </body>
  <script type='text/javascript'>

    var font_size = 10;

    $(document).ready(function(){
      $('textarea').on('keyup', function(e){
        $('.form-label .word-conter').html($(this).val().length);
          printPixel($(this).val());
      });

      $('select').on('change', function(e){
        font_size = this.value;
        printPixel($('textarea').val());
      });

    });

    function  printPixel(str)
    {
      $('.in-pixel').html(PixelConuter(str));
    }

    function PixelConuter(str)
    {
      var canvas = document.createElement('canvas');
      var ctx = canvas.getContext('2d');
      ctx.font = font_size +'px Arial';
      return ctx.measureText(str).width;
    }

  </script>
</html>
```

Thanks for reading.

## Answers

### Answer by Ravi Misra

I am write code in `JavaScript` and `HTML` language.

```html
<!doctype html>
<html lang='en'>
  <head>
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link href='https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css' rel='stylesheet'>
    <link href='https://getbootstrap.com/docs/5.2/assets/css/docs.css' rel='stylesheet'>
    <title> 'Bootstrap Example'</title>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js'></script>
    <script src='https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js'></script>
  </head>
  <body class='container mt-5'>

    <!-- Example Code -->
    <div class='row g-2'>

      <p>&nbsp; Is ravan exit in th world?</p>

      <div class='col-12 text-center'>
          <h1>Pixel Counter</h1>
      </div>

      <div class='col-12'>
        <label for='exampleFormControlTextarea1' class='form-label fw-bold d-flex'>
          Enter Text
          <span class='ms-auto text-danger word-conter'>0</span>
        </label>
        <textarea class='form-control' id='' rows='3'></textarea>
      </div>

      <div class='col-12'>
        <label class='form-label fw-bold'>
          Pixel Width : <span class='in-pixel'>0</span>
        </label>
      </div>

      <div class='col-12'>
        <label for='exampleFormControlTextarea1' class='form-label fw-bold d-flex'>
          Font Size
        </label>
        <select class='form-select'>
            <option value='10'>10</option>
            <option value='11'>11</option>
            <option value='12'>12</option>
            <option value='13'>13</option>
            <option value='14'>14</option>
            <option value='15'>15</option>
            <option value='16'>16</option>
            <option value='17'>17</option>
            <option value='18'>18</option>
            <option value='19'>19</option>
            <option value='20'>20</option>
        </select>
      </div>
    </div>


  </body>
  <script type='text/javascript'>

    var font_size = 10;

    $(document).ready(function(){
      $('textarea').on('keyup', function(e){
        $('.form-label .word-conter').html($(this).val().length);
          printPixel($(this).val());
      });

      $('select').on('change', function(e){
        font_size = this.value;
        printPixel($('textarea').val());
      });

    });

    function  printPixel(str)
    {
      $('.in-pixel').html(PixelConuter(str));
    }

    function PixelConuter(str)
    {
      var canvas = document.createElement('canvas');
      var ctx = canvas.getContext('2d');
      ctx.font = font_size +'px Arial';
      return ctx.measureText(str).width;
    }

  </script>
</html>
```

Thanks for reading.


---

Original Source: https://www.mindstick.com/interview/33859/how-to-create-pixel-counter-in-javascipt

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.
