https://github.com/moritzsalla/canvas-image-filter

Basic canvas pixel operations
https://github.com/moritzsalla/canvas-image-filter

canvas image-filter javascript

Last synced: 24 days ago
JSON representation

Basic canvas pixel operations

• Host: GitHub
• URL: https://github.com/moritzsalla/canvas-image-filter
• Owner: moritzsalla
• Created: 2019-11-07T20:23:14.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2021-05-29T11:55:52.000Z (over 3 years ago)
• Last Synced: 2024-11-06T03:55:38.347Z (2 months ago)
• Topics: canvas, image-filter, javascript
• Language: JavaScript
• Homepage:
• Size: 1.62 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Performing Pixel Operations on HTML Canvas

![Image of mountains by Dominik Lange](screenshot.png)

```javascript

position=(x+y*imageData.width)*4;

imageData.data[position] = c%255;

imageData.data[position+1] = c%255;

imageData.data[position+2] = c%255

imageData.data[position+3] = 255;

```

```javascript

// spits out a long list of values, with quadruples of red, green, blue and alpha channels

imageData.data[]

// [r, g, b, a, r, g, b, a, r, g, b, a…]

```

```javascript

// first two lines of an image

0   1  2  3  4  5

6   7  8  9 10 11

12 13 14 15 16 17

// we can now derive this useful formula from this observation

// to find a specific pixel, this formula has to be used

x + y * width

4 + 12 * 6

= 16

(x + 1 * width) * 4

```

```javascript

// we can skip alpha value like so

for (let i = 0, len = input.data.length; i < len; i++) {

    // skip canvas's alpha channel

    if (i % 4 === 3) {

      continue

    }

    // ...

  }

```

Good resources:

1. https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas

2. https://www.youtube.com/watch?v=nMUMZ5YRxHI

3. https://www.youtube.com/watch?v=rNqaw8LT2ZU