Déplacer une même ligne sur un canvas

Bonjour,

Je voudrais savoir comment déplacer une même ligne sur un canvas, j'ai ce code là mais il crée une nouvelle ligne à chaque fois.

Code:

---

1 2 3 4 5 6 7 8 9 10

deplaceLigne (x){ let canvas = this.mycanvas.nativeElement let context = canvas.getContext('2d');   context.beginPath(); context.moveTo(canvas.width, x); context.lineTo(0, x); context.stroke(); }

---

Bonjour,
le <canvas> n'est qu'une « ardoise », il te faut effacer la ligne tracée précédemment avant d'en dessiner une nouvelle.

Bonjour,

En faite je voudrais avoir quatre lignes sur le canvas que je voudrais déplacer dessus il y a une autre approche pour faire cela ?

Le plus simple reste de « nettoyer » la surface, avec un clearRect, et de redessiner dessus, en règle générale cela n'est pas perceptible à l'oeil. D'autres techniques peuvent être mise en oeuvre comme la superposition de plans mais bon ...

si je nettoie je devrais sauvegarder tous les éléments qui sont dessinés sur le canvas puis les remettre juste pour déplacer une ligne ? (j'ai l'intention après de rajouter d'autres éléments sur le canvas).

Comme dit un <canvas> est une « ardoise » donc pas forcément très souple d'utilisation.

Tu peux, pour certains éléments, les dessiner sur un <canvas> à part mais il te faudra quoiqu'il arrive définir les propriétés de tes éléments crées pour pouvoir les redessiner dans une boucle.

Y-a-t-il une autre solution pour faire ce que je veux ? J'ai une image sur laquelle je déplace des lignes dessus.

Tu peux mettre ton image en background de ton <canvas>, ou encore superposer deux <canvas>.

Bonjour,

J'ai pensé aussi à mettre en place une superposition de canvas. Je vais essayer de le mettre en place.
J'ai trouver aussi une API konva http://rafaelescala.com/ng2-konva/. Mais je ne comprends pas comment ajouter dans le stage l'image téléverser.