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

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

// draw moon phases animation frames
var animateMoonPhases = function(t) {
	// clear screen
	canvas.fillRect(0, 0, width, height);

	// draw moon with current phase depending on the timer
  var p=((t*0.05)&0xff);
  for(y = -64; y < 63; ++y) {
	  var l=r2-y*y;
    for(x = -64; x < 63; ++x) {
      z=p<128?x+p:x+p-256;
      if(x*x<l && z*z>l) {
        setPixel(160 + x, 100+y, drawingColor);
      }
    }
  }

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

// first call
animateMoonPhases();