Stack Overflow
Stack Overflow

Questions tagged [path-2d]

Path2D is an interface used to declare two dimensional paths on an HTML element

Path2D is an interface of the Canvas 2D API used to declare two dimensional objects that can be drawn on an HTML5 <canvas>.

Traditionally the Canvas API allows for only one path to be created and drawn on the canvas. Once this is done and a new path is created, the first path is lost. Path2D objects allows you to declare and retain your paths which can then be reused later.

Path2D is defined in the WhatWG Living Standard Specification. As of December 2017, Path2D is still considered experimental technology according to the MDN Docs.

References

44 questions
7
votes
1 answer

Mouse pointer detection over a Path2D

I have constructed a Path2D that represents an unclosed shape consisting of straight lines: I want to be able to detect when the mouse is clicked and the mouse pointer is near to (within a few pixels of) the path. Using the contains method does…
Adamski
  • 54,009
  • 15
  • 113
  • 152
5
votes
1 answer

Recovering elements of a Javascript Path2D

I want to examine the individual path segments of a Path2D object. For example, suppose that path = new Path2D(); path.ellipse(70,90,2,2,0,0,2*Math.PI); I want to pass path to some other function and pull out the elements of the Path2D so that they…
Randall Fairman
  • 296
  • 3
  • 9
5
votes
3 answers

Scaling canvas Path2d (with svg path data) without scaling the entire canvas?

I have multiple Path2D in a single canvas and I want to be able to scale and position each of them independently rather than adjusting the context.scale() and context.translate(). I am constructing each path2D object with SVG path data because I…
Jason Pearson
  • 105
  • 2
  • 5
4
votes
2 answers

How to position Path2D SVG element in canvas?

I'm drawing a path2D SVG shape on canvas. The problem is that the moveTo function does not seem to work when using SVG data. The problem is illustrated in this codepen. https://codepen.io/grasmachien/pen/rNaJeBN const canvas =…
Matthias
  • 141
  • 3
  • 11
4
votes
1 answer

How can I draw a polygon using path2d and see if a point is within it's area?

I,m trying to draw a polygon shape of any kind using multiple vertices with path2d and I want to later on see if a determinate point is within its area using java.awt.geom.Area public static boolean is insideRegion(Region region, Coordinate…
B. TIger
  • 459
  • 3
  • 10
  • 27
3
votes
0 answers

How can I convert a Path2D object into an SVG String in JavaScript?

Is there a way to take a Javascript Path2D object and convert it to its corresponding SVG String? According to the docs, it's pretty easy to convert string to Path using the constructor, but I can't seem to find a way to do the inverse. The context…
zashu
  • 747
  • 1
  • 7
  • 22
3
votes
0 answers

Calculating the area of a Path2D consisting of many connecting lines

I am giving the user the ability to click from point to point however they want. My goal is to calculate the area of whatever they created. The problem is that it isn't always going to be a perfect square or triangle, etc.. It seems like all I have…
Blake Rivell
  • 13,105
  • 31
  • 115
  • 231
3
votes
1 answer

Using Path2D in a TypeScript project is not resolved

I want to use the new Path2D api in a TypeScript project but I don't see it in lib.es6.d.ts What is my best course of action to use this? Does anyone have a d.ts file for Path2D?
Nikos
  • 7,295
  • 7
  • 52
  • 88
2
votes
1 answer

Transform only the styling of a Path2D

In the canvas 2D API, we can first define a subpath using one context's transformation and then change that context's transformation for only the fill() or stroke() calls, which would have effect on the stylings, like fillStyle, lineWidth and other…
Kaiido
  • 123,334
  • 13
  • 219
  • 285
2
votes
1 answer

java.awt.geom.Area object duplicating points?

I work with a lot of 2D floating point polygons. I came up with a use case where I need to subtract one from another, so I thought I'd use java.awt.geom.Area. I create an Area object with four points: 100.0, 50.0 150.0, 0.0 151.41421356237308,…
Billy Hinners
  • 21
  • 1
2
votes
0 answers

Find out if a point is on a line of a polygon using coordinates and path2d

So I'm using coordinates to create a Polygon using path2d. I need to find out if a point is exactly on the line of the polygon I created. Here's my code right now, which allows me to find out whether specific coordinates are within the polygon, but…
dochsner
  • 249
  • 2
  • 8
  • 25
2
votes
1 answer

How do I desserialize a Path2D.Double object?

I'm trying to save an object that has an ArrayList of Connector, which is a class that extends Path2D.Double. It gives me the exception gui.Connector; no valid constructor. I did a little research and came across this: no valid constructor when…
Marco Aurélio
  • 23
  • 5
2
votes
2 answers

Animate the drawing of Path2D

I'm creating a program that lets users draw on the screen, much like using the pencil tool in MS paint, and then allow the user to replay the process of creating the drawing, as if someone was painting it in front of you. The way I've done this…
Noupoi
  • 93
  • 7
2
votes
1 answer

Let an Enemy follow a path with the same speed

I started programming a game in java. I have Enemys and a Player, a basic 2D game, thats to get experience for the first time. Now i wanted the Enemys to follow a path, which i can draw in to a "level editor". I have a JPanel, a mouseMoveListener,…
T_01
  • 1,256
  • 3
  • 16
  • 35
2
votes
1 answer

Java Class Cast Exception java.awt.geom.Path2D.Double

I've been getting this class cast exception when trying to to implement an AffineTransform. Call to AffineTransform: public Shape moveToAndRotate(double x, double y, double theta) { double cx = getBounds2D().getCenterX(); double cy =…
jbolt
  • 688
  • 3
  • 16
  • 37
1
2 3