Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #38621 > unrolled thread

Canvas filled circles

Back to article view | Back to comp.lang.javascript

Contents

  Canvas filled circles Jonas Thörnvall <jonas.thornvall@gmail.com> - 2020-07-30 15:41 -0700
    Re: Canvas filled circles luserdroog <luser.droog@gmail.com> - 2020-07-31 01:19 -0700
      Re: Canvas filled circles Jonas Thörnvall <jonas.thornvall@gmail.com> - 2020-07-31 03:13 -0700
        Re: Canvas filled circles Jonas Thörnvall <jonas.thornvall@gmail.com> - 2020-07-31 03:38 -0700
        Re: Canvas filled circles luserdroog <luser.droog@gmail.com> - 2020-07-31 10:44 -0700
          Re: Canvas filled circles Jonas Thörnvall <jonas.thornvall@gmail.com> - 2020-07-31 11:06 -0700
          Re: Canvas filled circles luserdroog <luser.droog@gmail.com> - 2020-07-31 11:56 -0700
    Re: Canvas filled circles "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2020-07-31 11:49 -0700
      Re: Canvas filled circles Jonas Thörnvall <jonas.thornvall@gmail.com> - 2020-07-31 12:30 -0700

#38621 — Canvas filled circles

When i draw 2 filled circles.
ctm.arc(tileElement[u].X+50, tileElement[u].Y+50, 15, 0, 2 * Math.PI);
ctm.arc(tileElement[v].X+50, tileElement[v].Y+50, 15, 0, 2 * Math.PI);
ctm.fill();

And then draw two more to the right there is two triangles between them formed xshaped/butterfly?

Why?

[toc] | [next] | [standalone]

#38622

On Thursday, July 30, 2020 at 5:41:58 PM UTC-5, Jonas Thörnvall wrote:
> When i draw 2 filled circles.
> ctm.arc(tileElement[u].X+50, tileElement[u].Y+50, 15, 0, 2 * Math.PI);
> ctm.arc(tileElement[v].X+50, tileElement[v].Y+50, 15, 0, 2 * Math.PI);
> ctm.fill();
> 
> And then draw two more to the right there is two triangles between them formed xshaped/butterfly?
> 
> Why?

I've seen this in PostScript drawing. It can happen when arc has a subtly
different behavior depending upon whether there's a current point in the
path. If there's no current point, arc will start with a MoveTo element.
But if there is a current point, arc will start with a LineTo element.

The workaround is to call fill() or whatever your drawing operation is
after each shape. Filling will implicitly clear the path.

[toc] | [prev] | [next] | [standalone]

#38623

Den fredag 31 juli 2020 kl. 10:19:30 UTC+2 skrev luserdroog:
> On Thursday, July 30, 2020 at 5:41:58 PM UTC-5, Jonas Thörnvall wrote:
> > When i draw 2 filled circles.
> > ctm.arc(tileElement[u].X+50, tileElement[u].Y+50, 15, 0, 2 * Math.PI);
> > ctm.arc(tileElement[v].X+50, tileElement[v].Y+50, 15, 0, 2 * Math.PI);
> > ctm.fill();
> > 
> > And then draw two more to the right there is two triangles between them formed xshaped/butterfly?
> > 
> > Why?
> 
> I've seen this in PostScript drawing. It can happen when arc has a subtly
> different behavior depending upon whether there's a current point in the
> path. If there's no current point, arc will start with a MoveTo element.
> But if there is a current point, arc will start with a LineTo element.
> 
> The workaround is to call fill() or whatever your drawing operation is
> after each shape. Filling will implicitly clear the path.

Well i added fill after every ARC, and there is just two so that is not it?
I basicly have just three drawn elements rectangles, arcs and from Unicode charset.

And 2*Math.PI is the correct full circle, it is not somehow open at end?

[toc] | [prev] | [next] | [standalone]

#38624

Den fredag 31 juli 2020 kl. 12:13:42 UTC+2 skrev Jonas Thörnvall:
> Den fredag 31 juli 2020 kl. 10:19:30 UTC+2 skrev luserdroog:
> > On Thursday, July 30, 2020 at 5:41:58 PM UTC-5, Jonas Thörnvall wrote:
> > > When i draw 2 filled circles.
> > > ctm.arc(tileElement[u].X+50, tileElement[u].Y+50, 15, 0, 2 * Math.PI);
> > > ctm.arc(tileElement[v].X+50, tileElement[v].Y+50, 15, 0, 2 * Math.PI);
> > > ctm.fill();
> > > 
> > > And then draw two more to the right there is two triangles between them formed xshaped/butterfly?
> > > 
> > > Why?
> > 
> > I've seen this in PostScript drawing. It can happen when arc has a subtly
> > different behavior depending upon whether there's a current point in the
> > path. If there's no current point, arc will start with a MoveTo element.
> > But if there is a current point, arc will start with a LineTo element.
> > 
> > The workaround is to call fill() or whatever your drawing operation is
> > after each shape. Filling will implicitly clear the path.
> 
> Well i added fill after every ARC, and there is just two so that is not it?
> I basicly have just three drawn elements rectangles, arcs and from Unicode charset.
> 
> And 2*Math.PI is the correct full circle, it is not somehow open at end?

Well the logic isn't quite there yet but i am working on it "creating a possible moves array", but the drawing problem anyone understand what goes wrong?

https://jonasth.github.io/chess/chess.html

[toc] | [prev] | [next] | [standalone]

#38625

On Friday, July 31, 2020 at 5:13:42 AM UTC-5, Jonas Thörnvall wrote:
> Den fredag 31 juli 2020 kl. 10:19:30 UTC+2 skrev luserdroog:
> > On Thursday, July 30, 2020 at 5:41:58 PM UTC-5, Jonas Thörnvall wrote:
> > > When i draw 2 filled circles.
> > > ctm.arc(tileElement[u].X+50, tileElement[u].Y+50, 15, 0, 2 * Math.PI);
> > > ctm.arc(tileElement[v].X+50, tileElement[v].Y+50, 15, 0, 2 * Math.PI);
> > > ctm.fill();
> > > 
> > > And then draw two more to the right there is two triangles between them formed xshaped/butterfly?
> > > 
> > > Why?
> > 
> > I've seen this in PostScript drawing. It can happen when arc has a subtly
> > different behavior depending upon whether there's a current point in the
> > path. If there's no current point, arc will start with a MoveTo element.
> > But if there is a current point, arc will start with a LineTo element.
> > 
> > The workaround is to call fill() or whatever your drawing operation is
> > after each shape. Filling will implicitly clear the path.
> 
> Well i added fill after every ARC, and there is just two so that is not it?
> I basicly have just three drawn elements rectangles, arcs and from Unicode charset.
> 
> And 2*Math.PI is the correct full circle, it is not somehow open at end?

No, fill should automatically close the path first. It has to. Hmm.

[toc] | [prev] | [next] | [standalone]

#38626

Den fredag 31 juli 2020 kl. 19:44:39 UTC+2 skrev luserdroog:
> On Friday, July 31, 2020 at 5:13:42 AM UTC-5, Jonas Thörnvall wrote:
> > Den fredag 31 juli 2020 kl. 10:19:30 UTC+2 skrev luserdroog:
> > > On Thursday, July 30, 2020 at 5:41:58 PM UTC-5, Jonas Thörnvall wrote:
> > > > When i draw 2 filled circles.
> > > > ctm.arc(tileElement[u].X+50, tileElement[u].Y+50, 15, 0, 2 * Math.PI);
> > > > ctm.arc(tileElement[v].X+50, tileElement[v].Y+50, 15, 0, 2 * Math.PI);
> > > > ctm.fill();
> > > > 
> > > > And then draw two more to the right there is two triangles between them formed xshaped/butterfly?
> > > > 
> > > > Why?
> > > 
> > > I've seen this in PostScript drawing. It can happen when arc has a subtly
> > > different behavior depending upon whether there's a current point in the
> > > path. If there's no current point, arc will start with a MoveTo element.
> > > But if there is a current point, arc will start with a LineTo element.
> > > 
> > > The workaround is to call fill() or whatever your drawing operation is
> > > after each shape. Filling will implicitly clear the path.
> > 
> > Well i added fill after every ARC, and there is just two so that is not it?
> > I basicly have just three drawn elements rectangles, arcs and from Unicode charset.
> > 
> > And 2*Math.PI is the correct full circle, it is not somehow open at end?
> 
> No, fill should automatically close the path first. It has to. Hmm.

Of course when you select a new piece to move, the possible move from the other pawn should be overwritten, but i am not sure that help i do not understand what creat those lines/areas.

[toc] | [prev] | [next] | [standalone]

#38628

On Friday, July 31, 2020 at 12:44:39 PM UTC-5, luserdroog wrote:
> On Friday, July 31, 2020 at 5:13:42 AM UTC-5, Jonas Thörnvall wrote:
> > Den fredag 31 juli 2020 kl. 10:19:30 UTC+2 skrev luserdroog:
> > > On Thursday, July 30, 2020 at 5:41:58 PM UTC-5, Jonas Thörnvall wrote:
> > > > When i draw 2 filled circles.
> > > > ctm.arc(tileElement[u].X+50, tileElement[u].Y+50, 15, 0, 2 * Math.PI);
> > > > ctm.arc(tileElement[v].X+50, tileElement[v].Y+50, 15, 0, 2 * Math.PI);
> > > > ctm.fill();
> > > > 
> > > > And then draw two more to the right there is two triangles between them formed xshaped/butterfly?
> > > > 
> > > > Why?
> > > 
> > > I've seen this in PostScript drawing. It can happen when arc has a subtly
> > > different behavior depending upon whether there's a current point in the
> > > path. If there's no current point, arc will start with a MoveTo element.
> > > But if there is a current point, arc will start with a LineTo element.
> > > 
> > > The workaround is to call fill() or whatever your drawing operation is
> > > after each shape. Filling will implicitly clear the path.
> > 
> > Well i added fill after every ARC, and there is just two so that is not it?
> > I basicly have just three drawn elements rectangles, arcs and from Unicode charset.
> > 
> > And 2*Math.PI is the correct full circle, it is not somehow open at end?
> 
> No, fill should automatically close the path first. It has to. Hmm.

Aha. I was wrong here as reveal by Michael Haufe. In PostScript a fill
starts a new path. I incorrectly assumed that JS would follow the same
semantics, which was extra stupid because I've made this mistake before.

[toc] | [prev] | [next] | [standalone]

#38627

On Thursday, July 30, 2020 at 5:41:58 PM UTC-5, Jonas Thörnvall wrote:
> When i draw 2 filled circles.
> ctm.arc(tileElement[u].X+50, tileElement[u].Y+50, 15, 0, 2 * Math.PI);
> ctm.arc(tileElement[v].X+50, tileElement[v].Y+50, 15, 0, 2 * Math.PI);
> ctm.fill();
> 
> And then draw two more to the right there is two triangles between them formed xshaped/butterfly?
> 
> Why?

I assume because the "two more to the right" that you drew are missing another 'ctm.beginPath()' call. I've recreated your bug here:

<https://codepen.io/mlhaufe/pen/JjGgEjY>

specifically:

```js
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.arc(100, 75, 15, 0, 2 * Math.PI);
ctx.arc(150, 100, 15, 0, 2 * Math.PI);
ctx.fill();

// The following line is missing. Uncomment to fix the bug
// ctx.beginPath()
ctx.arc(200, 75, 15, 0, 2 * Math.PI);
ctx.fill();
```

[toc] | [prev] | [next] | [standalone]

#38629

Den fredag 31 juli 2020 kl. 20:49:42 UTC+2 skrev Michael Haufe (TNO):
> On Thursday, July 30, 2020 at 5:41:58 PM UTC-5, Jonas Thörnvall wrote:
> > When i draw 2 filled circles.
> > ctm.arc(tileElement[u].X+50, tileElement[u].Y+50, 15, 0, 2 * Math.PI);
> > ctm.arc(tileElement[v].X+50, tileElement[v].Y+50, 15, 0, 2 * Math.PI);
> > ctm.fill();
> > 
> > And then draw two more to the right there is two triangles between them formed xshaped/butterfly?
> > 
> > Why?
> 
> I assume because the "two more to the right" that you drew are missing another 'ctm.beginPath()' call. I've recreated your bug here:
> 
> <https://codepen.io/mlhaufe/pen/JjGgEjY>
> 
> specifically:
> 
> ```js
> const canvas = document.querySelector("canvas");
> const ctx = canvas.getContext("2d");
> 
> ctx.beginPath();
> ctx.arc(100, 75, 15, 0, 2 * Math.PI);
> ctx.arc(150, 100, 15, 0, 2 * Math.PI);
> ctx.fill();
> 
> // The following line is missing. Uncomment to fix the bug
> // ctx.beginPath()
> ctx.arc(200, 75, 15, 0, 2 * Math.PI);
> ctx.fill();
> ```

Thanks Michael i was clueless just could not find it in the examples.

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web