<!DOCTYPE html>
<html>
<head>
  <title>Square Drawing</title>
</head>
<body>
  <canvas id="canvas" width="400" height="400" style="border:1px solid black;"></canvas>

  <script>
    const ctx = document.getElementById("canvas").getContext("2d");

    ctx.beginPath();       // Start drawing
    ctx.moveTo(50, 50);    // Start point
    ctx.lineTo(150, 50);   // Top edge
    ctx.lineTo(150, 150);  // Right edge
    ctx.lineTo(50, 150);   // Bottom edge
    ctx.lineTo(50, 50);    // Left edge (back to start)
    ctx.strokeStyle = "red";
    ctx.lineWidth = 4;
    ctx.stroke();          // Draw the square
  </script>
</body>
</html>

Line-by-line explanation (a friendly walkthrough)

Nice small program — it’s a complete little recipe that tells the browser to draw a red 100×100 square on a 400×400 canvas. I’ll walk through each line as if we were standing next to the code and pointing to what it does.

<!DOCTYPE html>

This line tells the browser “this is an HTML5 document.” It forces standards mode so the page renders consistently across browsers.

<html>

Opens the root <html> element. Everything on the page lives inside this.

<head>

Starts the document head — the place for metadata (title, links to stylesheets, meta tags). Content in <head> is not shown on the page itself.

  <title>Square Drawing</title>

Sets the text you see in the browser tab (or the window title). Here the tab will read “Square Drawing”.

</head>
<body>

Closes the head and opens the visible part of the page — everything inside <body> is rendered on-screen.

  <canvas id="canvas" width="400" height="400" style="border:1px solid black;"></canvas>

This is the drawing surface.

  • <canvas> is an HTML element that provides a pixel grid you can draw into using JavaScript.
  • id="canvas" gives it a name so JavaScript can find it with getElementById.
  • width="400" height="400" set the canvas’s internal coordinate system to 400×400 pixels (important — these are the drawing resolution).
  • style="border:1px solid black;" is inline CSS that draws a 1-pixel black border around the canvas so you can see its edges on the page.
  • Note: the canvas’s origin (0,0) is at its top-left corner; x increases to the right, y increases downward.
  <script>

Starts the JavaScript block. The browser will execute the script as it parses this tag. Because the script is placed after the <canvas> element, the canvas is already in the DOM and available to the script.

    const ctx = document.getElementById("canvas").getContext("2d");

This is a key line.

  • document.getElementById("canvas") finds the <canvas> element by its id.
  • .getContext("2d") asks the canvas for a 2D drawing context — an object (ctx) with methods and properties for drawing lines, shapes, text, images, etc.
  • const ctx = stores that context in the constant variable ctx. From now on ctx is our “pen.”
    ctx.beginPath();       // Start drawing

beginPath() starts a new path. Think of it as lifting a fresh sheet of paper for a new shape — it resets the current subpath so the lines you add next form a single logical shape rather than being joined to previous stuff.

    ctx.moveTo(50, 50);    // Start point

moveTo(x, y) moves the virtual pen to the coordinates (50, 50) without drawing. This sets the starting point for the next drawing commands. In our canvas coordinate system that point is 50 pixels right and 50 pixels down from the top-left.

    ctx.lineTo(150, 50);   // Top edge

lineTo(x, y) adds a straight line segment from the current point (50,50) to (150,50) to the current path. It does not render anything on screen yet; it just records the geometry.

    ctx.lineTo(150, 150);  // Right edge

Adds another line from (150,50) down to (150,150). The path now contains two connected segments.

    ctx.lineTo(50, 150);   // Bottom edge

Adds the bottom edge from (150,150) left to (50,150).

    ctx.lineTo(50, 50);    // Left edge (back to start)

Adds the left edge back up to the starting point (50,50). This completes the rectangle/square outline. (An alternative would be ctx.closePath() which also closes the path by connecting the current point to the starting point.)

    ctx.strokeStyle = "red";

Sets the stroke (outline) color for the path. This accepts any valid CSS color string (e.g., "red", "#ff0000", "rgb(255,0,0)").

    ctx.lineWidth = 4;

Sets the thickness of lines in pixels. Here each side will be drawn 4 pixels wide.

    ctx.stroke();          // Draw the square

stroke() actually paints the outline of the current path onto the canvas using the current strokeStyle, lineWidth, and related settings. Until this call, the lines were only in memory; stroke() makes them visible.

  </script>
</body>
</html>

Closes the script tag, body and html — end of the document.

<
Previous Post
⚡ Python Exceptions: How Python Handles Errors Gracefully And Keeps Your Programs Running
>
Blog Archive
Archive of all previous blog posts