Graphical output canvas is affected by a separate kernel
- Dominant language
- JavaScript
- Stars
- 15.5k
- Forks
- 663
- PR merge metrics
- No merged PRs in 30d
Description

## *What* is wrong?
It seems as if one kernel's output size can affect the size of a canvas created by another. This means that the canvas created by a kernel is larger than should be expected.
## *Where* does it happen?
GPU.js running in browser in Chrome on a Mac (WebGL2 enabled)
## *How* do we replicate the issue?
```javascript
const gpu = new GPU();
const img_width = 64;
const img_height = 64;
const imgKernel = gpu
.createKernel(function (_image) {
const pixel = _image[this.thread.y][this.thread.x];
return pixel[0];
})
.setOutput([img_width, img_height]);
const renderKernel = gpu
.createKernel(function () {
this.color(1, 0, 0, 1);
})
.setGraphical(true)
.setOutput([32, 32]);
const image = document.createElement("img");
image.src = "./test.png";
image.onload = () => {
console.log("image width x height", image.naturalWidth, image.naturalHeight);
const imgOut = imgKernel(image); // This is not used just run
document.body.appendChild(renderKernel.canvas);
renderKernel();
};
```
The output looks like this:

You can see that the canvas is 64x64 pixels, the size of the `imgKernel` but the red section is 32x32 inside that which is the output of `renderKernel` despite the two having no relationship other than both of them are called.
## *How* important is this (1-5)?
*5* This is a pretty limiting bug if you want to use multiple kernels.
## Expected behavior (i.e. solution)
Should show a 32x32 red canvas as far as I can tell.
## Other Comments
Thank you for your time looking at this.
Contributor guide
Research direction
Start by running the provided GPU.js browser reproduction in Chrome with WebGL2 enabled, focusing on createKernel, setGraphical, setOutput, and the renderKernel.canvas interaction. Compare the canvas dimensions after imgKernel runs with the expected 32x32 graphical output. Done means the separate image kernel no longer affects the rendered canvas size, which should be 32x32 with the red output filling it.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- computer-graphics
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 42/100