Open In App

How to get Pixel from HTML Canvas ?

Last Updated : 02 May, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

To get the pixel of any specific portion from the HTML canvas you can use the HTML canvas getImageData() Method. The getImageData() method usually returns an ImageData object that contains the pixel information of the specified object on the HTML canvas. 

Example 1: This example will display each pixel value of the square box. The boxes color is linear gradient so the pixels will change the color value that will change simultaneously.

Program: 

html




<!DOCTYPE html>
<html>
 
<head>
    <title>
        Getting pixel information
        from html canvas.
    </title>
</head>
 
<body>
    <center>
        <h1 style="color:green;">
            GeeksfoGeeks
        </h1>
         
        <h3>
            Getting pixel information
            from html canvas
        </h3>
 
        <canvas id="GFG" width="190" height="100"
                style="border:1px solid black;">
        </canvas>
 
        <script>
         
            /* Retrieve canvas with id GFG,
                and store it in a */
            var a = document.getElementById("GFG");
 
            /* Retrieve a 2D context for the canvas */
            var gfg = a.getContext("2d");
 
 
            var geeks =
                gfg.createLinearGradient(0, 0, 200, 0);
             
            geeks.addColorStop(0, "green");
            geeks.addColorStop(1, "yellow");
 
            gfg.fillStyle = geeks;
            gfg.fillRect(20, 20, 150, 150);
 
            /* Define a function find(), that prints
            the array containing pixel information
            returned by the getImageData() method */
            function find() {
 
                /* Store the pixel information of
                the canvas at (x,y) coordinate of
                (20,20) */
                var ImageData =
                    gfg.getImageData(20, 20, 60, 60);
 
                /* Print the array on console */
                console.log(ImageData);
            }
             
            find();
        </script>
    </center>
</body>
 
</html>


Output: 

Example 2: Code for getting color/alpha information of the first pixel. After running the code you can check by changing the color from the line 36. 

html




<!DOCTYPE html>
<html>
 
<head>
    <title>
        Getting pixel information
        from html canvas.
    </title>
</head>
 
<body>
    <center>
        <h1 style="color:green;">
            GeeksfoGeeks
        </h1>
         
        <h3>
            Getting pixel information
            from html canvas
        </h3>
 
        <canvas id="GFG" width="100" height="100"
            style="border:1px solid black;">
        </canvas>
 
        <script>
             
            // Retrieve canvas with id GFG,
            // and store it in a
            var a = document.getElementById("GFG");
 
            // Retrieve a 2D context for the canvas
            var geeks = a.getContext("2d");
 
            // Set the filling style to red colour
            geeks.fillStyle = "blue";
 
            /* Move the cursor to the (x,y) coordinate
            of (20,20) and then create a rectangle of
            height and width 60 */
            geeks.fillRect(20, 20, 60, 60);
 
            /* Define a function find(), that prints
            the colour/alpha information of the
            first pixel returned by getImageData()
            method */
            function find() {
                 
                var ImageData =
                    geeks.getImageData(20, 20, 60, 60);
 
                /* Stores the red color information of
                the first pixel */
                red = ImageData.data[0];
 
                /* Stores the green color information of
                the first pixel */
                green = ImageData.data[1];
 
                /* Stores the blue color information of
                the first pixel */
                blue = ImageData.data[2];
 
                /* Stores the opacity of the first pixel */
                alpha = ImageData.data[3];
                console.log(red);
                console.log(green);
                console.log(blue);
                console.log(alpha);
            }
            find();
        </script>
    </center>
</body>
 
</html>    


Output: 



Similar Reads

How to convert a pixel value to a number value using JavaScript ?
In this article, we will see how to convert the string value containing 'px' to the Integer Value with the help of JavaScript. There are two approaches to converting a pixel value to a number value, these are: Using parseInt() MethodUsing RegExpApproach 1: Using parseInt() Method This method takes a string as the first argument and returns the Inte
2 min read
Chart.js Device Pixel Ratio Configuration
Chart.js Device Pixel Ratio Configuration option allows the users to override the default pixel ratio of the window, which provides control over the rendering resolution of the chart canvas. Syntax:const config = { options: { devicePixelRatio: 2 // Set your ratio value }, // Other chart configurations};Device Pixel Ratio Configuration OptionsBelow
3 min read
How to Code Pixel Perfect Design using Tailwind CSS ?
Pixel-perfect design refers to the ability to create designs that are accurate down to the pixel level. Tailwind CSS is a popular utility-first CSS framework that can help developers to create pixel-perfect designs quickly and efficiently. In this article, we'll discuss how to code pixel-perfect designs using Tailwind CSS. Approaches: There are two
5 min read
How to get the coordinates of a mouse click on a canvas element ?
The coordinates of the mouse whenever a click takes place can be found by detecting the click event with an event listener and finding the event's x and y positions. In this article we are going to learn How to get the coordinates of a mouse click on a canvas element. ApproachCreate a JavaScript function getMousePosition that takes the canvas eleme
2 min read
HTML Canvas Basics
In this article, we will know HTML Canvas Basics, and their implementation through the examples. The HTML "canvas" element is used to draw graphics via JavaScript. The "canvas" element is only a container for graphics. One must use JavaScript to actually draw the graphics. Canvas has several methods for drawing paths, boxes, circles, text, and addi
5 min read
How to resize an image in an HTML 5 canvas ?
The canvas element is part of HTML 5 and it allows the rendering of 2D shapes and bitmap(also called "raster") images. A canvas actually has two sizes: the size of the element. the size of the element's drawing surface. The element's width and height attributes set both the size of the element and the size of the element's drawing surface. CSS attr
1 min read
HTML canvas lineWidth Property
The HTML canvas lineWidth property is used to set or return the width of the line (thickness of the line). The width of the line is set in terms of pixels. The default value of this property is 1. Syntax: context.lineWidth = number; Property Values: number: This property value indicates the number which specifies the line width in terms of pixels.
2 min read
HTML canvas textAlign Property
The HTML canvas textAlign Property is used to set or return the current alignment for text content, according to the anchor point. Basically, the text will start at that position and the text will end at that specified position. Syntax: context.textAlign="center | end | left | right | start"; Property Values: start: It has a Default. The text start
2 min read
HTML canvas font Property
The HTML canvas font Property is used to change the present font family of the Text content of the &lt;canvas&gt; element. The font Property has a Default Property i.e 10px sans-serif Syntax: context.font="italic small-caps bold 12px arial"; Property Values: font-family: It is used to set the font type of an HTML element. It holds several font name
2 min read
HTML canvas lineJoin Property
The HTML canvas lineJoin property is used to set or return the type of corner created, when two lines meet, by using the lineJoin property. The type of join can have one of three styles: bevel, round, or miter. However, the join style has generally miter style. Syntax: context.lineJoin = "bevel|round|miter"; Property Values: miter: It is the defaul
2 min read