Manipulating the bits of the JavaScript canvas

Index of articles

Manipulating the bits of the JavaScript canvas

Beyond 32 bits

Page 1 of 2

If you plan to work with bitmaps at the most basic level, you should know how to test and modify bit patterns. The reason is that each pixel is stored using a set of bits to record each of the color channels.

Now available in paperback or ebook from Amazon.

JavaScript bitmap graphics
With Canvas


  1. JavaScript graphics
  2. Getting started with Canvas
  3. Plot paths
    Extract: Basic paths
    Extract: Bézier curves
  4. Outline and fill
    Extract: Line properties
    Extract: Filling and holes
  5. Transformations
    Extract: Transformations
    Extract: Personalized contact details
  6. Text
    Extract: Text, Typography & SVG
    Extract: Unicode
  7. Cutting, composition and effects
    Extract: Clipping & Basic Compositing
  8. Generating bitmaps
    Extract: Introduction to bitmaps
    Extract: Animation
  9. WebWorkers & OffscreenCanvas
    Extract: OffscreenCanvas
  10. Bit manipulation in JavaScript
    Extract: Bit manipulation **NEW!
  11. Typed arrays
  12. Files, blobs, urls and fetch
    Extract: Blobs and files
    Extract: Read / write local files
  13. Image processing
    Extract: ImageData
    Extract: The Filter API
  14. WebGL 3D
  15. 2D WebGL
    Extract: WebGL Convolutions

If you plan to work with bitmaps at the most basic level, you should know how to test and modify bit patterns. The reason is that each pixel is stored using a set of bits to record each of the color channels. You have to know how to manipulate the bits. The bit manipulation in JavaScript is complicated by the way it tries to be typeless, but it can be done. One consequence of this type-free approach is that numbers are always stored as 64-bit floating-point values ​​- that is, double-precision floating-point values.

Yes – that’s correct, JavaScript doesn’t have an integer type that you can use. When necessary, JavaScript will do an internal conversion to a 32-bit value, but you cannot directly access this integer and it is converted back to floating point format as soon as possible.

So JavaScript is different when it comes to bit manipulation, but it’s not that difficult. Let’s see how it all works.

Bitwise operators

JavaScript has a number of operators designed to let you perform bit manipulation. There are four bitwise operators:





XOR (exclusive or)




As you would expect, the NOT operator has the highest priority.

Note that there are also corresponding logical operators &&, || and ! which only work with Boolean values ​​and not bit patterns.

If you are more familiar with other languages, you might very well confuse ^ with raising to a power.

Bitwise operators work with numeric data that is converted from a floating point to a 32-bit integer, mined and then converted back to a floating point. Because a floating double can store a 32-bit integer with no loss of precision, everything works transparently as long as you stay within the 32-bit limit.

For example:

var a = 0xF0;
var b = 0xFF;
var c = ~a & b;

This first calculates the NOT at the bit level of a, i.e. 0F. Then it’s a bitwise AND with b, i.e. 0F & FF, which is F. You should see the result 15 in decimal displayed. Bit manipulation is generally easier to try using hexadecimal notation with the results returned in decimal, 0xF is 15, or in binary, 0xF is 1111. There is no way to enter binary directly into JavaScript but you can use hex and octal and there is the paresInt function which will convert from a range of bases.

So what if you go over the 32-bit limit?

Actually, strange things start to happen before you hit the 32-bit limit because the 32-bit value is signed and that means if the highest bit is 1, the returned value is negative.

For example:

var a = 0xFFFFFFF;
var b = 0xFFFFFFF;
var c = a & b;

displays 0xFFFFFFF, which you would expect. Note that toString (16) converts the floating point number to a hexadecimal string.

Now try to add one more F to both values ​​i.e. full 32 bit value, all set to 1. The result is displayed as -1, which may not be. not be what you expected, but it’s perfectly fine.

The result of the AND operation of two full 32-bit values ​​both set to 1 is a 32-bit value with all bits set to one, but since the 32-bit value is interpreted as a signed value when converted to a comma float, this displays as -1 using two’s complement.

You don’t have to worry too much about this as the bit pattern corresponding to -1 is 32 bits all set to 1, so everything should still work if you use the value for further bit manipulation. That is, even if it looks wrong, it still works as far as bit manipulation is concerned.

Now consider what happens if you add one more F to the values. In this case the values ​​are 36 bits, all set to 1 and the result should also be 36 bits, all set to 1. But no, the a and b values ​​are converted to 32 bit values, the two values ​​are combined by AND and gives a result of 32 bits, that is to say -1 as before. You cannot do bit manipulation with more than 32 bits.

Source link


Comments are closed.