Pokeball.js

/*This code draw a pokeball on a canvas*/ var red = '#FF1A1D'; var context = canvas.getContext('2d'); context.fillStyle = '#fff'; context.lineWidth = 15; /*External circle*/ context.beginPath(); context.arc(200, 200, 100, 0, 2*Math.PI); context.stroke(); context.fill(); /*half red*/ context.beginPath(); context.fillStyle = red; context.arc(200, 200, 100, 1*Math.PI, 0); context.fill(); /*line at middle I drew this line trying different values So I don't understand how it's working :( */ context.beginPath(); context.moveTo(100, 200); context.lineTo(300, 200); context.stroke(); /*Circle that holds the button*/ context.beginPath(); context.fillStyle = '#fff'; context.arc(200, 200, 25, 0, 2*Math.PI); context.stroke(); context.fill(); /*Black button in the middle of pokeball*/ context.beginPath(); context.fillStyle = '#000'; context.arc(200, 200, 12, 0, 2*Math.PI); context.fill();