# Tint image with alpha transparency in WEBGL

**URL:** <https://discourse.processing.org/t/tint-image-with-alpha-transparency-in-webgl/22002>\
**Category:** Libraries\
**Created:** [June 19, 2020, 3:51pm UTC](https://discourse.processing.org/t/tint-image-with-alpha-transparency-in-webgl/22002 "2020-06-19T15:51:15Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![dfd0226](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/dfd0226/32/9004_2.png) [@dfd0226](https://discourse.processing.org/u/dfd0226)\
**Post date:** [June 19, 2020, 3:51pm UTC](https://discourse.processing.org/t/tint-image-with-alpha-transparency-in-webgl/22002/1 "2020-06-19T15:51:15Z")

</div>

Hi all!

# Background

I’m trying to figure out how to **set the alpha channel on an image using tint when the sketch is in WEBGL mode.**

I’m building a React app that integrates p5.js. My code uses a physics library to create bodies in the sketch and **the physics library controls the drawing of p5 images** (the physics library is responsible for updating the positions/orientation of the images).

When users press a button press in the interface, the alpha value stored on a Collection of physics objects is updated. **I modified the physics library to read this alpha value into the external library** when drawing the images (all SVGs). Toggling the button changes alpha from being fully opaque (255) to semi-transparent (50). My code works as expected in normal draw mode, but **when I turn on WEBGL there is no change in the transparency of the image**.

If this helps, my project uses:

- p5.js v0.10.2
- react-p5-wrapper v.2.0.0 ([https://www.npmjs.com/package/react-p5-wrapper](https://www.npmjs.com/package/react-p5-wrapper))
- b2.js wrapper physics library for box2d ([https://github.com/bobcgausa/cook-js](https://github.com/bobcgausa/cook-js))

# Code

To get to work with React, I pass in a reference to the sketch instance when the physics world is created, what I call `ctx`.

I modified the draw function of the library to apply a tint to the image, but this isn’t working in WEBGL. Note: I’ve removed the code that isn’t directly relevant to drawing p5.Images.

```auto
draw() {
      // ...
      // Code to establish the position of the object from the physics library before drawing

      // Drawing logic
        if (this.fixtures[i].image != null) {
          if (Array.isArray(xy))
            ctx.image(this.fixtures[i].image, 0, 0);
          else {
           // MY MODIFIED CODE
            ctx.push();
              ctx.tint(255, this.parentClass.getParentCollection().getOpacity());
              ctx.image(this.fixtures[i].image, 0, 0, xy.x, xy.y);
            ctx.pop();
          }

        }
        else {
          // ....
          // if no image is provided, the code just draws primitive p5 shapes
      }
      return false;
    }

```

# Question

Is it possible to **update my draw statement to set the same tint behavior in WEBGL** that works in regular draw mode?

---

<div class="post-metadata">

**Author:** ![dfd0226](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/dfd0226/32/9004_2.png) [@dfd0226](https://discourse.processing.org/u/dfd0226)\
**Post date:** [July 17, 2020, 4:17pm UTC](https://discourse.processing.org/t/tint-image-with-alpha-transparency-in-webgl/22002/2 "2020-07-17T16:17:14Z")

</div>

Bumping this back up the queue. Anyone have success getting Tint/transparency to work on PImages when rendering with WebGL?

**EDIT**

I created a JSFiddle that demonstrates the issue: [https://jsfiddle.net/kgt6rjof/](https://jsfiddle.net/kgt6rjof/)

You will need to enable CORS on your browser to get the image to load properly

---

<div class="post-metadata">

**Author:** ![dfd0226](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/dfd0226/32/9004_2.png) [@dfd0226](https://discourse.processing.org/u/dfd0226)\
**Post date:** [July 17, 2020, 4:52pm UTC](https://discourse.processing.org/t/tint-image-with-alpha-transparency-in-webgl/22002/3 "2020-07-17T16:52:43Z")

</div>

**Temporary fix for this problem:**

For anyone else who has this problem, I believe I’ve fixed the issue for now:

My project’s `package.json` specified v. ^1.0.0 of p5 and not 0.10.2. I downgraded the package back to the previous version and tint is now working.