Get canvas 2D context and draw a filled circle

WHAT THIS TESTS: This question checks whether you understand the HTML Canvas API coordinate space and the distinction between primitive rectangles and paths. The interviewer cares if you know that the origin is at the top-left corner at coordinate zero comma zero, that one unit normally equals one pixel, and that all elements are placed relative to this origin. It also tests whether you know that rectangles are primitive shapes while circles require paths.

A GOOD ANSWER COVERS: A strong answer follows the procedural steps shown in the reference. First, select the canvas element and call getContext with the string "2d" to obtain the rendering context. Second, recognize that a circle is not a primitive rectangle and must be drawn by combining one or more paths using the assortment of path drawing functions available. Third, set the position with x and y values relative to the top-left origin, and define size through the path parameters. Fourth, change the color and stroke style before rendering, then use the appropriate fill or stroke operation to display the shape.

COMMON WRONG ANSWERS: A major red flag is treating canvas like SVG and describing declarative markup instead of immediate mode path commands. Another error is forgetting that only rectangles are primitive and attempting to use a nonexistent native circle function. Candidates sometimes place the origin at the bottom-left or center instead of the top-left corner. Failing to mention that x and y specify the position relative to the origin shows a gap in coordinate space knowledge. Finally, omitting the step of changing color and stroke style before drawing implies unfamiliarity with how canvas state works.

LIKELY FOLLOW-UPS: An interviewer might ask how to clear a portion of the canvas, which connects to clearRect. They could ask how to draw a rectangular outline, leading to strokeRect. Another follow-up is how to animate the shape over time, which would require clearing and redrawing. They might also ask how to translate the origin to a different position, rotate the grid, or scale it, since the reference notes these transformations are possible later in the tutorial.

ONE CONCRETE EXAMPLE: Consider a canvas element that is one hundred fifty pixels wide and one hundred fifty pixels high. You obtain the "2d" context from the element. To draw a filled circle, you use path drawing functions because circles are not primitive shapes. You define the center position using x and y coordinates measured from the top-left origin, and you set the desired color and stroke style on the context before filling the path. For instance, positioning the shape at seventy-five comma seventy-five places it at the center of the default grid, and setting the fill color before rendering produces a solid shape at that location.

Source: developer.mozilla.org