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
Answer from Felix Kling on Stack Overflow
🌐
MDN Web Docs
developer.mozilla.org › en-US › docs › Web › JavaScript › Reference › Global_Objects › Uint8ClampedArray
Uint8ClampedArray - JavaScript - MDN Web Docs
July 10, 2025 - The Uint8ClampedArray typed array represents an array of 8-bit unsigned integers clamped to 0–255. The contents are initialized to 0 unless initialization data is explicitly provided. Once established, you can reference elements in the array using the object's methods, or using standard array index syntax (that is, using bracket notation).
Discussions

Uint8ClampedArray alternative or make Uint8Array produce a clamped string of byte values
I think you shouldn't be using Uint8Array to store your data - it simply doesn't work like a Uint8ClampedArray. For example: More on stackoverflow.com
🌐 stackoverflow.com
Convert Uint8ClampedArray to regular array
How can I convert a Uint8ClampedArray (like one used for storing HTML5 canvas image data) to a regular array, in which values won't be constrained to 0-255? More on stackoverflow.com
🌐 stackoverflow.com
Uint8ClampedArray to Uint8Array to base64
I understand there are differences ... as the Uint8ClampedArray involves an image that is being drawn onto a canvas for which a downloadable blob link is made. ... And then I try to convert it into base64 with this: https://gist.github.com/enepomnyaschih/72c423f727d395eeaa09697058238727 · EDIT: Already tried putting it into the constructor of Uint8Array but when ... More on stackoverflow.com
🌐 stackoverflow.com
html - How to convert a javascript array to Uint8ClampedArray which works in IE - Stack Overflow
I have array of pixels which obtain from a raw image in a smart card (you could see my open problem) and I want to draw it in a canvas: More on stackoverflow.com
🌐 stackoverflow.com
🌐
MDN Web Docs
developer.mozilla.org › en-US › docs › Web › JavaScript › Reference › Global_Objects › Uint8ClampedArray › Uint8ClampedArray
Uint8ClampedArray() constructor - JavaScript - MDN Web Docs
July 10, 2025 - // From a length const uint8c = new Uint8ClampedArray(2); uint8c[0] = 42; uint8c[1] = 1337; console.log(uint8c[0]); // 42 console.log(uint8c[1]); // 255 (clamped) console.log(uint8c.length); // 2 console.log(uint8c.BYTES_PER_ELEMENT); // 1 // From an array const x = new Uint8ClampedArray([21, ...
🌐
GitHub
gist.github.com › MikkoH › f8c5148871bb3ba57455
Converting between TypedArrays · GitHub
Converting between TypedArrays. GitHub Gist: instantly share code, notes, and snippets.
🌐
Yaox023
blog.yaox023.com › uint8array-and-uint8clampedarray
Uint8Array and Uint8ClampedArray - yaox023's blog
January 4, 2023 - We cannot provide a description for this page right now
🌐
W3Schools
w3schools.com › jsref › jsref_typed_uint8clampedarray.asp
JavaScript Uint8ClampedArray
Uint8ClampedArray contents are initialized to 0 by default. The difference between an Uint8Array and an Uint8ClampedArray is how values are added.
🌐
GeeksforGeeks
geeksforgeeks.org › javascript-uint8clampedarray-from-method
JavaScript Uint8ClampedArray.from() Method | GeeksforGeeks
July 11, 2023 - This method returns a new Uint8ClampedArray instance. Below examples Illustrate the working of Uint8ClampedArray.from() method in JavaScript:
Find elsewhere
🌐
W3Schools
w3schools.com › jsref › jsref_obj_typed_array.asp
JavaScript Typed Arrays
Int8Array Uint8Array Uint8ClampedArray Int16Array Uint16Array Int32Array Uint32Array BigInt64Array BigUint64Array Float16Array Float32Array Float64Array JS Typed Reference
🌐
GeeksforGeeks
geeksforgeeks.org › javascript-uint8clampedarray-of-method
JavaScript Uint8ClampedArray.of() Method | GeeksforGeeks
December 9, 2022 - Example 1: In this example, the values passed are the character values that are converted to Uint8Clamped by the method. ... Example 2: In this example, the values passed are the int values that are converted to Uint8Clamped by the method.
🌐
JavaScripture
javascripture.com › Uint8ClampedArray
Uint8ClampedArray JavaScript API
Creates a new Uint8ClampedArray and copies the items of array into this.
Top answer
1 of 1
4

If you really have the array of every rgba value of each pixels, and the height/width of your image, then you can use this method :

To get a correct dataImage, in a cross-browser way, the only method is to call context.createImageData() method.
But to get a proper imageData, you'll need to get the width and height of your image from somewhere.

Here is an example, with an hard written pixel array, note that it is a normal array, which could have come from a json file for example.

var ctx = c.getContext('2d');

var drawArray = function(arr, width, height) {
  // set your canvas width/height
  c.width = width;
  c.height = height;
  
  // create the imageData object, you'll need the width and height of your image
  var dataImage = ctx.createImageData(width, height);
  // browsers supporting TypedArrays
  if (dataImage.data.set) {
    dataImage.data.set(arr);
  } else {
    // IE9
    arr.forEach(function(val, i) {
      dataImage.data[i] = val;
    });
  }
  ctx.putImageData(dataImage, 0, 0);
};

var pixelsArray = [0, 0, 0, 0, 170, 170, 170, 3, 0, 0, 0, 0, 0, 0, 0, 1, 170, 170, 170, 3, 0, 0, 0, 0, 170, 170, 170, 3, 127, 127, 127, 2, 0, 0, 0, 0, 127, 127, 127, 2, 170, 170, 170, 3, 0, 0, 0, 0, 170, 170, 170, 3, 0, 0, 0, 1, 0, 0, 0, 1, 170, 170, 170, 3, 170, 170, 170, 3, 0, 0, 0, 0, 154, 5, 119, 94, 255, 0, 192, 213, 244, 0, 182, 223, 225, 0, 171, 164, 93, 13, 80, 19, 0, 0, 0, 0, 0, 0, 0, 3, 0, 0, 0, 0, 60, 15, 45, 17, 221, 0, 166, 159, 250, 0, 186, 224, 244, 0, 184, 210, 194, 0, 145, 84, 0, 0, 0, 0, 0, 0, 0, 0, 121, 18, 91, 84, 255, 0, 184, 255, 253, 0, 182, 252, 252, 0, 178, 254, 255, 0, 190, 255, 207, 0, 148, 204, 21, 0, 0, 12, 0, 0, 0, 4, 0, 0, 0, 8, 199, 0, 141, 196, 255, 0, 191, 255, 251, 0, 178, 252, 255, 0, 183, 254, 254, 0, 181, 255, 112, 18, 90, 68, 0, 0, 0, 0, 229, 0, 177, 192, 255, 0, 186, 255, 249, 0, 180, 242, 255, 0, 187, 255, 245, 0, 175, 240, 255, 0, 200, 255, 170, 0, 129, 156, 0, 0, 0, 0, 170, 0, 130, 150, 255, 0, 199, 255, 246, 0, 176, 240, 255, 0, 187, 255, 249, 0, 179, 241, 255, 0, 187, 255, 224, 0, 173, 178, 127, 127, 127, 2, 240, 0, 181, 214, 255, 0, 182, 255, 253, 0, 182, 251, 255, 0, 183, 255, 253, 0, 182, 254, 250, 0, 183, 254, 237, 0, 181, 241, 113, 0, 87, 99, 240, 0, 184, 241, 249, 0, 182, 254, 255, 0, 182, 253, 255, 0, 183, 255, 252, 0, 182, 250, 255, 0, 183, 255, 235, 0, 178, 208, 0, 0, 0, 0, 238, 0, 180, 203, 255, 0, 184, 255, 252, 0, 182, 249, 255, 0, 183, 255, 251, 0, 184, 253, 251, 0, 190, 255, 246, 0, 192, 252, 244, 0, 198, 249, 245, 0, 191, 252, 252, 0, 190, 255, 251, 0, 184, 253, 255, 0, 183, 255, 252, 0, 181, 248, 255, 0, 185, 255, 237, 0, 179, 200, 0, 0, 0, 0, 192, 3, 148, 143, 255, 0, 188, 255, 249, 0, 180, 246, 254, 0, 186, 255, 248, 0, 187, 253, 246, 0, 192, 255, 241, 0, 196, 254, 235, 0, 197, 251, 242, 0, 197, 254, 246, 0, 192, 255, 248, 0, 187, 253, 254, 0, 186, 255, 250, 0, 181, 246, 255, 0, 185, 255, 200, 1, 154, 145, 0, 0, 0, 0, 111, 19, 85, 39, 239, 0, 176, 245, 252, 0, 186, 250, 250, 0, 188, 254, 247, 0, 193, 255, 241, 0, 195, 254, 238, 0, 202, 255, 235, 0, 205, 254, 237, 0, 201, 255, 242, 0, 196, 255, 247, 0, 193, 255, 249, 0, 188, 254, 249, 0, 183, 249, 246, 0, 182, 249, 104, 17, 81, 44, 212, 212, 212, 6, 0, 0, 0, 0, 128, 0, 90, 101, 255, 0, 204, 255, 233, 0, 182, 246, 246, 0, 200, 255, 236, 0, 200, 254, 233, 0, 206, 255, 228, 0, 209, 254, 233, 0, 206, 255, 236, 0, 200, 254, 245, 0, 199, 255, 236, 0, 184, 245, 255, 0, 206, 255, 116, 0, 84, 109, 0, 0, 0, 0, 0, 0, 0, 0, 36, 0, 36, 7, 0, 0, 0, 0, 134, 0, 106, 110, 255, 0, 216, 255, 230, 0, 195, 247, 237, 0, 208, 255, 227, 0, 209, 254, 226, 0, 215, 255, 227, 0, 209, 254, 235, 0, 208, 255, 234, 0, 199, 247, 253, 0, 206, 255, 134, 0, 105, 116, 0, 0, 0, 0, 36, 0, 36, 7, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 9, 0, 0, 0, 0, 133, 0, 112, 111, 242, 0, 213, 255, 224, 0, 206, 247, 227, 0, 218, 255, 218, 0, 217, 253, 227, 0, 219, 255, 220, 0, 204, 247, 247, 0, 218, 255, 111, 0, 93, 114, 0, 0, 0, 0, 28, 0, 0, 9, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 10, 0, 0, 0, 0, 156, 0, 143, 135, 239, 0, 229, 255, 213, 0, 214, 245, 222, 0, 231, 255, 214, 0, 215, 246, 239, 0, 230, 255, 165, 0, 152, 137, 0, 0, 0, 0, 25, 0, 25, 10, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 8, 0, 0, 0, 0, 172, 0, 173, 173, 226, 0, 237, 255, 201, 0, 219, 242, 224, 0, 235, 255, 174, 0, 176, 184, 0, 0, 0, 0, 0, 0, 0, 8, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 2, 30, 0, 30, 17, 203, 0, 220, 216, 214, 0, 239, 255, 215, 0, 234, 233, 61, 0, 69, 33, 0, 0, 0, 0, 0, 0, 0, 3, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 6, 0, 0, 0, 0, 65, 0, 78, 62, 219, 0, 251, 255, 86, 0, 100, 91, 0, 0, 0, 0, 31, 0, 31, 8, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 51, 51, 102, 5, 142, 50, 157, 86, 56, 56, 56, 9, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];

drawArray(pixelsArray, 16, 16);
<canvas id="c"></canvas>

🌐
W3cubDocs
docs.w3cub.com › javascript › global_objects › uint8clampedarray
Uint8ClampedArray - JavaScript - W3cubDocs
August 7, 2022 - The Uint8ClampedArray typed array represents an array of 8-bit unsigned integers clamped to 0–255. The contents are initialized to 0. Once …
🌐
Runebook.dev
runebook.dev › en › docs › javascript › global_objects › uint8clampedarray
A Friendly Guide to JavaScript's Uint8ClampedArray
// Using Uint8Array with manual clamping or wrapping let uint8Array = new Uint8Array(1); uint8Array[0] = 200; let newValue = (uint8Array[0] + 100) % 256; // Use modulo operator uint8Array[0] = newValue; console.log(uint8Array[0]); // Output: ...
🌐
Medium
medium.com › @j622amilah › javascript-basics-6-4b681b792298
JavaScript Basics 6. A list of conversion methods for… | by Practicing DatScy | Medium
November 22, 2024 - async function convert_canvas_to_base64str(ctx, canvasElement) { // ----------------------------- // Get canvas image const uint8ClampedArray = await ctx.getImageData(0, 0, canvasElement.width, canvasElement.height); // TypedArray Uint8ClampedArray // console.log('uint8ClampedArray: ', uint8ClampedArray); // Convert TypedArray to normalArray const normalArray = await Array.from(uint8ClampedArray.data); // console.log('normalArray: ', normalArray); // Convert [normalArray of bytes] to text_characters var ASCII_stringArray = normalArray.map((val) => { return String.fromCharCode(val); }); // cons
🌐
MDN
mdn2.netlify.app › en-us › docs › web › javascript › reference › global_objects › uint8clampedarray
Uint8ClampedArray - JavaScript | MDN
February 18, 2022 - The Uint8ClampedArray typed array represents an array of 8-bit unsigned integers clamped to 0-255; if you specified a value that is out of the range of [0,255], 0 or 255 will be set instead; if you specify a non-integer, the nearest integer ...