Results 1 to 4 of 4

Thread: Getting a pixel in webgl area

  1. #1

    Getting a pixel in webgl area

    Hi all,

    I know behind webgl is a canvas object. However, when I attemp to use getcontext('2d'), realizing it does not work for webgl canvas. So, how am I going to get the pixel information from a Webgl canvas?


  2. #2
    Junior Member
    Join Date
    Sep 2010

    Re: Getting a pixel in webgl area

    3 options

    1) Draw it into 2d canvas

    <canvas id="a"></canvas>
    <canvas id="b"></canvas>

    a = document.getElementById("a");
    b = document.getElementById("b");
    gl = a.getContext("webgl");
    ctx = b.getContext("2d");



    // now use ctx to get the pixels

    2) Use readPixels

    buf = new Uint8Array(gl.canvas.width * gl.canvas.height * 4);
    gl.readPixels(0, 0, gl.canvas.width, gl.canvas.height, gl.RGBA, gl.UNSIGNED_BYTE, buf);

    3) If all you want is a PNG or JPG canvas.toDataURL still works.

  3. #3

    Re: Getting a pixel in webgl area

    Hi Greg,

    Hey thanks for your reply. I'll try it out. Nearly lost the hope of getting the answer for this question, thank goodness that I have come back to have a look (after a month)


  4. #4
    Junior Member
    Join Date
    Dec 2011
    Kingston, Ontario, Canada

    Re: Getting a pixel in webgl area

    When using ReadPixel, I found some problems when my Canvas was not square (i.e. when Canvas Width and Height did not match). As soon as they matched (regardless if they were a power of 2) Read Pixel returned good values.

    So if you have problems reading back pixel values try making you Canvas size square.
    "We often compare ourselves to the U.S.
    and often they come out the best,
    but they only have the right to bear arms
    while we have the right to bare breasts"
    Song "Busting The Breast" by Bowser & Blue

Similar Threads

  1. Replies: 2
    Last Post: 12-17-2008, 12:52 PM
  2. Draw an area correctly...
    By Eymerich in forum OpenGL ES
    Replies: 1
    Last Post: 02-22-2008, 08:32 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
Proudly hosted by Digital Ocean