# Full opacity of pixel alpha on image border
**URL:** https://discourse.processing.org/t/full-opacity-of-pixel-alpha-on-image-border/5858
**Category:** Coding Questions
**Created:** [November 23, 2018, 5:25pm UTC](https://discourse.processing.org/t/full-opacity-of-pixel-alpha-on-image-border/5858 "2018-11-23T17:25:56Z")
**Posts on this page:** 7
**Page:** 1
### Author:  [@slow\_izzm](https://discourse.processing.org/u/slow_izzm)
#### Post date: [November 23, 2018, 5:25pm UTC](https://discourse.processing.org/t/full-opacity-of-pixel-alpha-on-image-border/5858/1 "2018-11-23T17:25:56Z")
I am seeing full opacity on the border of my image when painting pixels … why is this?
My source image has 0 opacity around the edges. If you uncomment lines 21 and 27, and comment out line 52 you will see.
In the provided example you will see when painting, the top and left borders will show up, I set my graphics canvas to cut off the right and bottom edge of the canvas by 13 pixels.
[https://editor.p5js.org/slow\_izzm/sketches/S1h7b2SCm](https://editor.p5js.org/slow_izzm/sketches/S1h7b2SCm)
---
### Author:  [@Sarah](https://discourse.processing.org/u/Sarah)
#### Post date: [November 23, 2018, 11:49pm UTC](https://discourse.processing.org/t/full-opacity-of-pixel-alpha-on-image-border/5858/2 "2018-11-23T23:49:54Z")
The image appears transparent because when you create the graphics, you filled the circle with opacity: `pg.fill(col[0], col[1], col[2], col[3]);`. When using RGB values `fill();` only needs 3 values, and the forth one is to change the opacity.
---
### Author:  [@slow\_izzm](https://discourse.processing.org/u/slow_izzm)
#### Post date: [November 23, 2018, 11:52pm UTC](https://discourse.processing.org/t/full-opacity-of-pixel-alpha-on-image-border/5858/3 "2018-11-23T23:52:39Z")
Thanks, but that’s not my question, what I am asking is why the border of an alpha image is being drawn as if it was opaque where there is no opacity.
---
### Author:  [@Sarah](https://discourse.processing.org/u/Sarah)
#### Post date: [November 24, 2018, 3:52am UTC](https://discourse.processing.org/t/full-opacity-of-pixel-alpha-on-image-border/5858/4 "2018-11-24T03:52:43Z")
Sorry, I misread your question.
I’ve tested it on my laptop, and the image renders with the correct opacity. Try putting
```auto
fill(255,0,0);
rect(150,150,100,100);
```
directly above `image(img_paint,0,0);` do you see the red rectangle behind the image?
---
### Author:  [@slow\_izzm](https://discourse.processing.org/u/slow_izzm)
#### Post date: [November 24, 2018, 3:36pm UTC](https://discourse.processing.org/t/full-opacity-of-pixel-alpha-on-image-border/5858/5 "2018-11-24T15:36:29Z")
Maybe I’m not being clear … here is a code without hiding the edges. Paint from the middle all the way to the edge of the canvas and you will see what I am talking about.
```auto
let img_paint;
let brush = [];
let pg;
function preload() {
img_paint = loadImage("burner.png");
}
function setup() {
createCanvas(window.innerWidth - 4, window.innerHeight - 4);
background(51);
for (let i = 0; i < 33; i++) {
let b = new Brush();
brush.push(b);
}
img_paint.resize(img_paint.width>>1, img_paint.height>>1);
pg = createGraphics(img_paint.width, img_paint.height);
}
function draw() {
//clear();
if (mouseIsPressed) {
for (let i = 0; i < brush.length; i++) {
brush[i].render();
}
}
//image(img_paint,0,0);
}
class Brush {
constructor() {
this.pos = createVector();
}
update() {
let d = dist(mouseX, mouseY, this.pos.x, this.pos.y);
this.pos.x = mouseX + (random(-13, 13));
this.pos.y = mouseY + (random(-13, 13));
return this;
}
display() {
pg.clear();
pg.noStroke();
pg.imageMode(CENTER);
let px = floor(this.pos.x);
let py = floor(this.pos.y);
let col = img_paint.get(px, py);
pg.fill(col[0], col[1], col[2], col[3]);
pg.ellipse(this.pos.x, this.pos.y, 13, 13);
image(pg, 0, 0);
return this;
}
render() {
return this.update().display();
}
}
```
Also here is a screenshot of the issue … 
As you can see, the edges of the images are acting as if they have some opacity. If you are to uncomment `clear();` and `image(img_paint,0,0);` … you will see my source image has no opacity near the edges.
---
### Author:  [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)
#### Post date: [November 24, 2018, 11:30pm UTC](https://discourse.processing.org/t/full-opacity-of-pixel-alpha-on-image-border/5858/6 "2018-11-24T23:30:48Z")
This issue isn’t the image file.
1. Where is the brush color coming from? The image pixels.
2. What happens when you move the mouse _off_ the image? The image pixels aren’t assigning to the brush anymore – the brush turns black.
3. How much of this black-brush can we see? Half the brush radius – 13 pixels. Hence a ~6 px line when you rub the mouse around past the edges of your images.
There are many ways to deal with this. Here is just one – only draw where you want to.
```auto
display() {
pg.clear();
pg.noStroke();
pg.imageMode(CENTER);
let px = floor(this.pos.x);
let py = floor(this.pos.y);
let brush_radius = 13;
let img_margin = brush_radius/2 + 1;
if(px > 0 + img_margin &&
px < img_paint.width - img_margin &&
py > 0 + img_margin &&
py < img_paint.height - img_margin)
{
let col = img_paint.get(px, py);
pg.fill(col[0], col[1], col[2], col[3]);
pg.ellipse(this.pos.x, this.pos.y,
brush_radius, brush_radius);
}
image(pg, 0, 0);
return this;
}
```
Another approach would be to change your method of coloring the brush.
---
### Author:  [@slow\_izzm](https://discourse.processing.org/u/slow_izzm)
#### Post date: [November 25, 2018, 2:48am UTC](https://discourse.processing.org/t/full-opacity-of-pixel-alpha-on-image-border/5858/7 "2018-11-25T02:48:21Z")
Ahh … that makes perfect sense. Thank you for your help!