canvas setpixel

pixel manipulation of canvas using createImageData and putImageData

HTML

<body>
    <canvas id='canvas' width='320' height='200'></canvas>
</body>

JavaScript

// definitions
drawingColor = {
    r: 0xa1,
    g: 0x60,
    b: 0x47,
    a: 0xff
};

// init canvas
element = $('#canvas').get(0);
canvas = element.getContext('2d');
width = element.width;
height = element.height;
canvas.fillStyle = '#000000';
canvas.fillRect(0, 0, width, height);

// setpixel
var setPixel = function(x,y,c) {
    var p = canvas.createImageData(1,1);
    p.data[0] = c.r;
    p.data[1] = c.g;
    p.data[2] = c.b;
    p.data[3] = c.a;
    canvas.putImageData(p,x,y);
}

// draw filled star
l = 0;
m = 59;
for(y = 0; y < 64; ++y) {
	for(x =- 32; x < 31; ++x) {
		z = Math.abs(x);
  	if(z < l && z > -m || z < m && 32 > m) {
	    setPixel(160 + x, y, drawingColor);
    }
  }
	l += .3;
	m -= 1.2;
}