Un texte canvas recouvert par les éléments HTML

Fermé

LeVieuxCampeur - Modifié le 17 juil. 2020 à 22:26
Roipirau Messages postés 16 Date d'inscription mercredi 18 septembre 2019 Statut Membre Dernière intervention 18 juillet 2020 - 18 juil. 2020 à 12:38

Bonjour !

je débute un peu en HTML/Javascript et j'ai un problème :

Dans mon site, le texte écrit avec canvas s'affiche derrière les autres éléments (qui sont placés sur le canvas). J'ai essayé z-index, mais ce n'est pas probant. je ne trouve pas de réponse sur internet...
La console ne m'indique rien de particulier.

Je ne peux pas mettre d'image car il est impossible de me connecter.

Un petit bout de mon code :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Plus propre</title>
 <link rel="stylesheet" href="stylesheets/pp4.css">
  </head>
  <body id="idbody">
 <div id ="nodecanvas">
 <canvas class="myCanvas" id="canvas">
 <h1>Vérifiez que votre navigateur est bien à jour.</h1>
 <p>Il ne supporte pas la balise canvas</p>
 </canvas>
 </div>
 
 <div id="titre" class="titre">
        <img src="./img-prep/panneau planches chaines.png" id="imgtitre" class="imagetitre">
  <h1 id="textetitre" >Titre</h1>
    </div>
 <button class="texteadeplacer imgbutton" id="soustitre1" >Tutoriel</button>
 <button class="texteadeplacer imgbutton" id="soustitre2" >Partie</button>
    <script src="script/pluspropre4.js"></script>
  </body>
</html>

Le JS est un peu plus long...
Je pense que c'est un peu inintéressant, en gros j'écrit juste sur mon canvas
Donc je met un petit bout pour la forme ;-)


    ctx.textAlign = 'left';
    ctx.textBaseline = "middle";
    ctx.font = tailletexte+'px impact';
    console.log("écrit");
    ctx.fillText(texte,100,0);
    check ++;

Et le CSS : (un peu foullis mais fonctionnel)

.titre
{
 width: 100%;
 position: absolute;
 vertical-align: top;
 text-align: center;
 font-family: cursive;
 font-variant: small-caps;
 bottom: 100%;/* Après ça arrive au millieu de la page*/
 display: none;
 z-index: 3;
}
.imagetitre
{
 position: relative;
 z-index: 1;
}
.texteadeplacer
{
 position: absolute;
 top: 100%;/* Après ça arrive au millieu de la page*/
 vertical-align: top;
 text-align: center;
 outline-style:none;
 border: none;
 outline: 0;
 margin : auto;
 display: inline-block;
 font-family: cursive;
 font-variant: small-caps;
 color: dark;
 text-shadow: 1px 1px 1px grey;
 z-index: 2;
}

.imgbutton
{
 padding: 0px;
 background-image: url("../img-prep/pp4m+v.png");
 background-size: cover; 
 cursor: pointer;
 background-color: transparent;
 font-size: 1.5em;
}
.imgbutton:hover
{
 cursor: pointer;
}
.imgbutton:active
{
}
.myCanvas//---------------Le canvas est ici------------------
{
 z-index: 20;
}

J'espère que ce sera suffisant pour vous faire voir le problème...
Merci !

A voir également:

Un texte canvas recouvert par les éléments HTML
Canvas gratuit - Télécharger - Divers Photo & Graphisme
Mettre un texte en majuscule - Guide
Editeur html - Télécharger - HTML
Texte argumentatif sur les avantages et les inconvénients du téléphone portable ✓ - Forum Mobile
Photoshop elements gratuit - Télécharger - Retouche d'image

1 réponse

Réponse 1 / 1

Roipirau Messages postés 16 Date d'inscription mercredi 18 septembre 2019 Statut Membre Dernière intervention 18 juillet 2020 1
Modifié le 18 juil. 2020 à 12:41

Bonjour,

Si j'ai bien compris tu as écrit plusieurs textes dans ton canvas et tu veux qu'un texte en particulier soit au-dessus ?

Si c'est le cas :
as-tu essayé de créer ton texte après les autres ?

Si ça ne l'est pas et qu'en fait tu as un texte écrit à partir du canvas et un autre avec une balise <h1></h1> et <p></p> :

Ce n'est pas possible.
Je te conseille un truc comme ça :

<div id ="nodecanvas">
    <canvas class="myCanvas" id="canvas"></canvas>
    <h1>Vérifiez que votre navigateur est bien à jour.</h1>
    <p>Il ne supporte pas la balise canvas</p>
</div>

Et là normalement ça peut marcher mais fait gaffe au background de ton canvas avant la transparence.

Discussions similaires

Trouver le mot réellement écrit en lettres capitales PIX

Formule Excel : "SI" une cellule contient un mot, alors ?

copie de texte

Excel si cellule contient texte alors...

Dépixeliser / déflouter un texte ?

Discussions similaires

Newsletters