110

What is the difference between Uint8Array and Uint8ClampedArray in JavaScript? I understand that Uint8ClampedArray is used with canvas for pixel manipulations. Why is that and what is the benefit?

0

1 Answer 1

148

Looking at the examples for Uint8ClampedArray and Uint8Array, it looks like the difference is how values are treated when assigned.

If you are trying to set one element to a clamped array to any value outside of the range 0-255, it will simply default to 0 or 255 (depending on whether the value is smaller or larger). A normal Uint8Array array just takes the first 8 bit of the value.

Examples:

var x = new Uint8ClampedArray([17, -45.3]);
console.log(x[0]); // 17
console.log(x[1]); // 0
console.log(x.length); // 2

var x = new Uint8Array([17, -45.3]);
console.log(x[0]); // 17
console.log(x[1]); // 211
console.log(x.length); // 2
Sign up to request clarification or add additional context in comments.

7 Comments

Note also that Uint8Array([0.9]) is [0], but Uint8ClampedArray([0.9]) is [1], ie. the clamped version uses rounding, but the basic version uses floor.
The OP mentioned this was used for pixel values in the canvas, is this a shortcut for saturated arithmetic?
I think Uint8Array would be faster - unless you were using the clamping features for graphics, which maybe faster in that case.
Neither the answer, nor the examples give a clue why and in what cases that behavior of Uint8ClampedArray could be beneficial.
@llya These are for image/video/audio process. The main feature is: it never overflow/underflow. When you are trying to increase the brightness in an image: max brightness (255)+1 should give 255, not overflow to zero.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.