Get canvas 2D context and draw a filled circle
This tests Canvas API coordinates and context acquisition. A strong answer selects the canvas, calls getContext("2d"), uses path functions for circles, sets color style, and fills. A red flag is ignoring the top-left origin or using SVG instead.
What's really being asked
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.
The full answer
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.
The mistakes people make
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.
What usually comes next
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.
A 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.
Interview question
When drawing a filled circle on a canvas, what distinguishes the correct approach from drawing a filled rectangle?
- a.Circles must be defined with a path method before filling, while rectangles use a direct primitive functionCorrect
- b.Circles require calling getContext with 'circle' instead of '2d'
- c.Circles are added via declarative SVG markup inside the canvas element
- d.Circles use x and y coordinates measured from the bottom-left origin
Why? this is the answer
The Canvas API provides primitive rectangle functions but requires path methods like arc() for circles. Distractor D is wrong because canvas relies on immediate mode JavaScript commands, not declarative SVG markup.
Just read this? Test yourself on what you have been reading.
Read the original → developer.mozilla.org
- #typescript
- #canvas
- #web apis
- #2d context
- #frontend
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on typescript — each one lists the topics its interview covers.
See open roles