<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Filling Color inside a Circle on the Canvas</title> <style> canvas { border: 3px solid red; } </style> <script> window.onload = function() { var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); context.arc(150, 150, 80, 0, 2 * Math.PI, false); context.fillStyle = "purple"; context.fill(); context.lineWidth = 5; context.strokeStyle = "black"; context.stroke(); }; </script> </head> <body> <canvas id="myCanvas" width="350" height="250"></canvas> </body> </html>