canvas setpixel

pixel manipulation of canvas using createImageData and putImageData

HTML

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

JavaScript

// definitions
backgroundColor = {
    r: 0x00,
    g: 0x00,
    b: 0x00,
    a: 0xff
};

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';

// clear screen
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);
}

var r=63;
var r2=r*r;
var t=0;
var lt=null;

// draw moon phases animation frames
var animateMoonPhases = function(timer) {
	// calculate t
  if(lt != null) {
  	t += timer-lt;
  }
 	lt = timer;

	// draw moon with current phase depending on the timer
  var p=((t*0.03)&0xff);
  $("#debug").html(p);
  
  for(i = -Math.PI/2; i < Math.PI/2; i+=.01) {
  	if(p < 128) {
	    color = drawingColor;
			x = (r-p)*Math.cos(i);
			y = r*Math.sin(i);
    } else {
	  	color = backgroundColor;
			x = (r-(p-128))*Math.cos(i);
			y = r*Math.sin(i);
    }
		setPixel(160 + x, 100 + y, color);
  }

	// request next animation frame
  requestAnimationFrame(animateMoonPhases);
}

// first call
animateMoonPhases();