<p>Straight from the <a href="https://html.spec.whatwg.org/multipage/scripting.html#dom-context-2d-lineto" rel="nofollow">specification</a> of <code>lineTo</code>:</p>

<blockquote>
  <p>If the object's path has no subpaths, then ensure there is a subpath for (x, y).</p>
</blockquote>

<p>And "ensure that there is a subpath" links to <a href="https://html.spec.whatwg.org/multipage/scripting.html#ensure-there-is-a-subpath" rel="nofollow">this bit</a>:</p>

<blockquote>
  <p>When the user agent is to ensure there is a subpath for a coordinate (x, y) on a path, the user agent must check to see if the path has its <em>need new subpath flag</em> set. If it does, then the user agent must create a new subpath with the point (x, y) as its first (and only) point, as if the <code>moveTo()</code> method had been called, and must then unset the path's <em>need new subpath flag</em>.</p>
</blockquote>

<p>In short, if you call <code>lineTo</code> without an explicit <code>beginPath</code>, then a new path is created implicitly, with the given point as its starting point.</p>

CC BY-SA 3.0
2016-10-06T14:35:54.007Z
2016-10-06T14:53:55.370Z
2016-10-06T14:53:55.370Z
Martin Ender
<p>When I was doing some graphic designing with JavaScript, I saw this strange behaviour.<br>
When I ran the following code (with proper HTML and JavaScript of course),</p>

<pre><code>context.lineTo(100, 100);
context.lineTo(200, 200);
context.stroke();
</code></pre>

<p>The result was a straight line from (100, 100) to (200, 200), which I wasn't expecting. I expected that nothing would be drawn. I think this would only happen with the following code:</p>

<pre><code>context.beginPath();
context.moveTo(100, 100);
context.lineTo(200, 200);
context.stroke();
</code></pre>

<p>Is my thinking wrong? Why is it happening so? Can anyone explain?</p>

<javascript><2d-graphics>
Successive lineTo(x, y) in JavaScript
Shashank
# Successive lineTo(x, y) in JavaScript

(Asked by: username_0 on 2016-10-06)

When I was doing some graphic designing with JavaScript, I saw this strange behaviour.  
When I ran the following code (with proper HTML and JavaScript of course),

```
context.lineTo(100, 100);
context.lineTo(200, 200);
context.stroke();

```

The result was a straight line from (100, 100) to (200, 200), which I wasn't expecting. I expected that nothing would be drawn. I think this would only happen with the following code:

```
context.beginPath();
context.moveTo(100, 100);
context.lineTo(200, 200);
context.stroke();

```

Is my thinking wrong? Why is it happening so? Can anyone explain?

**Tags:** javascript, 2d-graphics


---

## 1 answers

### Answer by username_1 on 2016-10-06. Score: 2

Straight from the [specification](https://html.spec.whatwg.org/multipage/scripting.html#dom-context-2d-lineto) of `lineTo`:

> If the object's path has no subpaths, then ensure there is a subpath for (x, y).

And "ensure that there is a subpath" links to [this bit](https://html.spec.whatwg.org/multipage/scripting.html#ensure-there-is-a-subpath):

> When the user agent is to ensure there is a subpath for a coordinate (x, y) on a path, the user agent must check to see if the path has its *need new subpath flag* set. If it does, then the user agent must create a new subpath with the point (x, y) as its first (and only) point, as if the `moveTo()` method had been called, and must then unset the path's *need new subpath flag*.

In short, if you call `lineTo` without an explicit `beginPath`, then a new path is created implicitly, with the given point as its starting point.


---

