Will need to draw an arc: ctx.arc ();
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <canvas id="canv" width="300" height="300"></canvas> <script> function draw() { var canvas = document.getElementById(' Canv ' ); IF ( ! Canvas.getContext) return ; var CTX = canvas.getContext ( " 2D " ); // open path drawing ctx.beginPath (); // Definition are: center x, center y, radius r, starting arc arc arc arc ends, CW / CCW (clockwise fasle default) ctx.arc ( 150 , 150 , 50 , 0 , Math.PI, to false ); // stroke ctx. Stroke (); //ctx.closePath (); // end path, ending arc connected // ctx.fill (); // a closed path, and filling the closed region } Draw (); </ Script > </ body > </ HTML >