Glow.js - Sebelum di sederhanakan

var createGambarGlow = new (function(){
var that = this;
that.radius = 15
that.draw = function(){

try {
var x
var y
var startAngle
var endAngle
var counterClockwise

x = 483
y = 301
startAngle = 0
endAngle   = 360
counterClockwise = true;
ctx.save();
ctx.beginPath();
ctx.moveTo(x, y);
ctx.arc(x, y, that.radius, startAngle, endAngle, counterClockwise);
ctx.lineTo(x, y);
ctx.lineWidth = 2;
//ctx.fillStyle = 'rgba(255,255,0,0.9)';// fill color

var sudut1 = xybutton[nosoal].sdt1;
var sudut2 = xybutton[klikbtn].sdt2;

var jumlsudut = sudut1+sudut2;
var fsudut = jumlsudut==180;

// create radial gradient
var grd = ctx.createRadialGradient(x, y, 0, x, y, that.radius);
if(fsudut){
grd.addColorStop(0, 'rgba(0,220,200,1)');// biru
grd.addColorStop(1, '#FFFFFF'); // putih
}else{
grd.addColorStop(0, 'rgba(255,0,255,0.9)');// merah
grd.addColorStop(1, '#FFFFFF');// putih
}

ctx.fillStyle = grd;
ctx.fill();
ctx.restore();

} catch (e) {};
}
})();

Properti Garis di HTML5 (line property)

// ketebalan garis
context.lineWidth = 5;

// warna garis
context.strokeStyle = 'blue';


// model ujung garis
ada 3 model:
1. context.lineCap = 'butt';
2. context.lineCap = 'round';
3. context.lineCap = 'square';

Cara Rotasi Objek di HTML

Ini dia contoh routine nya:

   ctx.save();
   ctx.beginPath();

pindahkan dulu ke posisi sekarang
   ctx.translate(xposisi,yposisi)

rotasi objek
   ctx.rotate(sudutrotasi*Math.PI/180);

kembalikan ke posisi semula
   ctx.translate(-xposisi,-yposisi)


   ctx.moveTo(x, y);
   ctx.arc(x, y, Jari , sudut1 , sudut2 , true);
   ctx.lineTo(x, y);
   ctx.fillStyle = warna;
   ctx.fill();
   ctx.closePath();
   ctx.restore();

sebelum rotasi

setelah rotasi