11492 sujets

JavaScript, DOM et API Web HTML5

Salut à tous,

J'ai un projet un peu particulier à faire et j'ai besoin de votre aide dans mon code car je suis bloqué.

J'ai l'ambition de créer une page qui défile automatiquement (autoscroll) vers la droite, pour cela j'ai utilisé du javascript. J'ai aussi besoin d'avoir la possibilité de dessiner avec le curseur, pour cela j'ai utilisé du javascript et un canvas que j'ai intégré directement à l'HTML. Le problème c'est que j'aimerais que le tout (le dessin) soit réalisé sur une image en background, mais que l'image bouge aussi dans le défilement.
Et là, tout bloque : je n'arrive pas à dessiner sur l'image lorsqu'elle est mise en dehors du canvas car l'écriture est masquée sous l'image, et lorsqu'elle est mise dans le canvas, elle ne s'affiche pas. J'ai tenté de mettre l'image en background dans le CSS mais du coup elle ne bouge pas avec le défilement...


Voici le JSfiddle

https://jsfiddle.net/ncb03tkf/4/

Merci d'avance !!
Modifié par Nyth (16 Nov 2019 - 19:40)