Workshop › Hangman › Step 18 of 36

Draw a line

What we are doing

The gallows and the figure are made of straight lines. A small line(x1, y1, x2, y2) helper draws one; the first use is the ground of the gallows.

```js
function line(x1, y1, x2, y2) {
  ctx.beginPath()
  ctx.moveTo(x1, y1)
  ctx.lineTo(x2, y2)
  ctx.stroke()
}

function draw() {
  ctx.fillStyle = '#fefce8'
  ctx.fillRect(0, 0, canvas.width, canvas.height)

  // The gallows
  ctx.strokeStyle = '#78350f'
  ctx.lineWidth = 6
  line(40, 270, 220, 270)
```

What it means

A line on a canvas is a path: beginPath() starts one, moveTo puts the pen down at the start, lineTo draws to the end, and stroke() paints it.
x1, y1, x2, y2 are four parameters: the start and end points.
strokeStyle is the line color (like fillStyle for fills), lineWidth its thickness in pixels.
line(40, 270, 220, 270) draws the ground: from (40, 270) to (220, 270).

Your turn

Above function draw() {, write the line function and leave an empty line.
In draw, under the fillRect line, leave an empty line and write the four gallows lines. Press Run.

Skills: Drawing on a canvas, Functions

← List the wrong letters The gallows →

All steps