<canvas id="myCanvas" width="200" height="200" style="border: #000000;">
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
// canvas.getContext("2d") returns an object with methods and properties for drawing on the
// canvas: circles, text, boxes, lines, and more.
var context = canvas.getContext("2d");
context.beginPath();
// context.arc(x, y, r, sAngle - Start, eAngle - End, counterclockwise - Optional);
context.arc(120, 90, 50, 0, 2 * Math.PI);
// context.fillStyle= color|gradient|pattern;
context.fillStyle = 'green';
context.fill();
context.font = "20px Arial";
// fillText(text, x, y, maxWidth - Optional);
context.fillText("Circle", 95, 30);
context.fillStyle = 'red';
context.fill();
context.lineWidth = 3;
// context.strokeStyle = color|gradient|pattern;
context.strokeStyle = '#00ff00';
context.font = "20px Arial";
context.fillText("Circle", 95, 170);
context.stroke();
</script>
