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
1
vote
1 answer

fill a custom object defined by a path2d object

I am trying to fill a path2d object of the HTML5 canvas.context. I have drawn a custom path that is a bezier curve according to this site: https://javascript.info/bezier-curve but am unable to get it to fill with a solid colour. Here is some code in…
miller the gorilla
  • 860
  • 1
  • 7
  • 19
1
vote
0 answers

Godot 3.0 Change Animation of KinimaticBody 2D following a path

I'm trying to get a kinematic body to change its animation to the appropriate isometric one as it follows a path. The code I'm using is below and it is attached to A KinematicBody2D. Any idea would be helpful even changes to structure…
Jason Moreland Digitalrecline
  • 286
  • 2
  • 19
1
vote
1 answer

Path2D.addPath got removed?

I have been working with Path2D for a while, but now it seems like it's function Path2D.addPath(path, matrix?) got removed (at least in chrome). Is there actually any replacement? Is it permanent, or just a mistake on browser part?
Akxe
  • 9,694
  • 3
  • 36
  • 71
1
vote
1 answer

How to clear Path in JavaFX GraphicsContext?

I am drawing a complex path to render a 3D image from scratch. It is the task and use of 3D engines is not allowed. I am using: GraphicsContext gc = getGraphicsContext2D(); gc.clearRect(x, y, w, h); gc.appendSVGPath(svg); gc.stroke(); svg is a…
Bato-Bair Tsyrenov
  • 1,174
  • 3
  • 17
  • 40
1
vote
1 answer

Use of isPointInPath() to reference Path2D objects?

So I've gotten pretty excited about the introduction of Canvas Paths as standard objects in contemporary browsers, and have been trying to see how much mileage I can get out of this new-ish feature. However, my understanding of how these objects…
Jonathan Straus
  • 317
  • 1
  • 3
  • 12
1
vote
1 answer

Java Path2D performance issue

I have a program that utilizes Path2D.Float to draw a vector object (a large fractal design). My code allows zooming and panning. I have an axis object that has methods to convert world coordinates (pairs of doubles) to display coordinates (pairs…
MarshallBS
  • 76
  • 6
1
vote
1 answer

Path2D.intersect() Similar to Area.intersect()

I have played around with Area.intersect() and was wondering if there is a way to create a method much like this one using Path2D because I noticed a performance jump when using Path2D as a shape. In other words take a portion of a large Path2D and…
StoneAgeCoder
  • 923
  • 1
  • 7
  • 13
0
votes
1 answer

On a canvas, why does a Path2D object still pick up on event listener at original location, even after the object has moved?

I'm making a game via canvas and Javascript. I have several Path2D objects on the canvas, and I want one of the objects to move when you have it selected(defined as a function within its class) and click on a different Path2D object. The 'selected'…
Dan
  • 5
  • 1
0
votes
0 answers

HTML Canvas context.clip(new Path2D("...path...")) causing memory leak

I have a simple game-loop that clips the canvas each iteration with a predefined Path2D to create an edge like this: The problem is that over time (~30sec) it starts to slow down in performance linearly. Here is the game-loop code: private…
Sam Scolari
  • 113
  • 1
  • 10
0
votes
0 answers

How to change the position of the Image created in Path2D in Canvas with SVG Paths?

I have some SVG Images and I want to use it in my project. In the project I have an onscroll function and the function redraw the whole canvas for me each time user scrolls. when I load the Image like a file in canvas, each time that canvas clears…
M.M .Z
  • 11
  • 1
0
votes
0 answers

How to draw an SVG at a location on an HTML canvas via Path2D?

Let's say I have the following code which draws a heart: const ctx = document.querySelector("canvas").getContext("2d"); const pathHeart = new Path2D("M9.293 1.55l.707.708.707-.707a5 5 0 1 1 7.071 7.071l-7.07 7.071a1 1 0 0 1-1.415 0L2.222 8.622a5…
Ryan Peschel
  • 11,087
  • 19
  • 74
  • 136
0
votes
1 answer

Check if point is inside of shape drawn by a complex Path2D

I want to check if a given point is inside of the space drawn inside of a irregular path - inside of the brain (the path is below). I don't seem to be able to use CanvasRenderingContext2D.isPointInPath(path, x, y) because it only returns true if the…
Sérgio LP
  • 19
  • 1
  • 4
0
votes
1 answer

Is there a way to detect if a point is in a Path2D object after it has been rotated and translated?

I am trying to find a point in a Path2D object in an HTML5 canvas using JavaScript. var path = new Path2D; path.rect(0,0,100,100); // declare the path ctx.beginPath();…
Matthias Southwick
  • 101
  • 9
0
votes
2 answers

Canvas draw line with border

I need to draw a line and give it a border. I tried to draw two lines, one 5px and above 3px But that doesn't exactly seem like a real border const ctx = canvas.getContext('2d'); const path = new Path2D(); ctx.strokeStyle = "black"; ctx.lineWidth…
Israel kusayev
  • 833
  • 8
  • 20
0
votes
0 answers

DOMMatrix scaleSelf broken?

I don't know if anybody actually uses this, but I want to use the DOMMatrix object to position and SCALE an SVG-path on a HTMLCanvas 2d-context. var path = new Path2D("M0.55,0.55 C0.55,0.55,0.45,0.55,0.45,0.55 C0.45,0.55,0.45,0.45,0.45,0.45…
Morplson
  • 73
  • 1
  • 8
1
2
3