|Index of articles|
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.
- Getting started with Canvas
- Plot paths
Extract: Basic paths
Extract: Bézier curves
- Outline and fill
Extract: Line properties
Extract: Filling and holes
Extract: Personalized contact details
Extract: Text, Typography & SVG
- Cutting, composition and effects
Extract: Clipping & Basic Compositing
- Generating bitmaps
Extract: Introduction to bitmaps
- WebWorkers & OffscreenCanvas
Extract: Bit manipulation **NEW!
- Typed arrays
- Files, blobs, urls and fetch
Extract: Blobs and files
Extract: Read / write local files
- Image processing
Extract: The Filter API
- WebGL 3D
- 2D WebGL
Extract: WebGL Convolutions
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.
var a = 0xF0; var b = 0xFF; var c = ~a & b; alert(c);
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.
var a = 0xFFFFFFF; var b = 0xFFFFFFF; var c = a & b; alert(c.toString(16));
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.