HTML and CSS Reference
In-Depth Information
ypos = (mouse.y + Math.sin(angle) * radius) | 0,
offset = (xpos + ypos * imagedata.width) * 4;
//pixel component colors: r,g,b,a (0-255)
pixels[offset] = brush_color >> 16 & 0xff; //red
pixels[offset + 1] = brush_color >> 8 & 0xff; //green
pixels[offset + 2] = brush_color & 0xff; //blue
pixels[offset + 3] = 255; //alpha
}
context.putImageData(imagedata, 0, 0);
}
};
</script>
</body>
</html>
This script uses the event handlers we set up in the first example, and works the same way. When you
press the mouse button, a random “paint” color is assigned and the pixel drawing code is started. Within
an area around the mouse cursor, random pixels are filled in to simulate each splatter of paint. Play
around with the brush size and density, and, if you're feeling adventurous, change the way individual color
components are assigned to the pixels.
Pixel manipulation can be a powerful tool used for some advanced animations and effects. Although not
the focus of this topic, it's fun to experiment with, and another way to render images to the canvas
element.
Important formulas in this chapter
You added a few more valuable tools to your collection in this chapter, mostly relating to handling color.
Convert hex to decimal
console.log(hexValue);
Convert decimal to hex
console.log(decimalValue.toString(16));
Combine component colors
color = red << 16 | green << 8 | blue;
Extract component colors
red = color24 >> 16 & 0xFF;
green = color24 >> 8 & 0xFF;
blue = color24 & 0xFF;
