Partage
  • Partager sur Facebook
  • Partager sur Twitter

Ajouter de l'interactivité à une pop up

Saory972
    30 janvier 2023 à 16:28:47

    Je suis en train de créer une pop up de personnalisation et j'aimerai faire en sorte que les images ou les textes qui seront proposés puissent être cliquables et visibles dans le CANVAS. Je ne suis pas très douée en javascript mais je suis motivée.

    voici mon html :

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Modal personnalisation</title>
  <link rel="stylesheet" href="cid.css">
</head>
<body>

<button><a href="#box">Personnalisez-le</a></button>

<div id="box">
    <div id="modale">
        <a href="#">&times;</a>
        
        
        <canvas id="canvas" width="400" height="300"></canvas>
        
        <div class="options">
            <h3>Nos couleurs de fonds</h3>
    
                <div class="conteneur-coloris-fonds">
                    <div class="galerie-conteneur">
                    <div class="images">
                        <a href="#teinte1"><img src="teintes/Teintes compressées/3.png" alt="Vieux Rose"></a></div>
                        <div class="nom"><p>Vieux Rose</p></div>
                    </div>
                
                 <div class="galerie-conteneur">
                    <div class="images">
                       <a href="#teinte2">
                        <img src="teintes/Teintes compressées/4.png" alt="Vieux Rose Brush"></a></div>                    
                        <div class="nom"><p>Vieux Rose Brush</p></div>
                    </div>
    
                      <div class="galerie-conteneur">
                    <div class="images">
                        <a href="#teinte3">
                        <img src="teintes/Teintes compressées/5.png" alt="Noir"></a></div>                    
                        <div class="nom"><p>Noir</p></div>
                    </div> 
    
                    <div class="galerie-conteneur">
                    <div class="images">
                        <a href="#teinte4">
                        <img src="teintes/Teintes compressées/6.png" alt="Noir Brush"></a></div>
                        <div class="nom"><p>Noir Brush</p></div>
                    </div> 
    
                    <div class="galerie-conteneur">
                    <div class="images">
                        <a href="#teinte5">
                        <img src="teintes/Teintes compressées/7.png" alt="Blanc"></a></div>                    
                        <div class="nom"><p>Blanc</p></div>
                    </div>
            
                    <div class="galerie-conteneur">
                    <div class="images">
                        <a href="#teinte6">
                        <img src="teintes/Teintes compressées/8.png" alt="Blanc Brush"></a></div>           
                        <div class="nom"><p>Blanc Brush</p></div>
                    </div> 
    
                    <div class="galerie-conteneur">
                    <div class="images">
                        <a href="#teinte7">
                        <img src="teintes/Teintes compressées/9.png" alt="Gris Clair"></a></div>                    
                        <div class="nom"><p>Gris Clair</p></div>
                    </div>
     
                    <div class="galerie-conteneur">
                    <div class="images">
                        <a href="#teinte8">
                        <img src="teintes/Teintes compressées/10.png" alt="Gris Clair Brush"></a></div>                    
                        <div class="nom"><p>Gris Clair Brush</p></div>
                    </div>
    
                    <div class="galerie-conteneur">
                    <div class="images">
                        <a href="#teinte9">
                        <img src="teintes/Teintes compressées/11.png" alt="Gris Foncé"></a></div>                 
                        <div class="nom"><p>Gris Foncé</p></div>
                    </div>
    
                    <div class="galerie-conteneur">
                    <div class="images">
                        <a href="#teinte10">
                        <img src="teintes/Teintes compressées/12.png" alt="Gris Foncé Brush"></a></div>                   
                        <div class="nom"><p>Gris Foncé Brush</p></div>
                    </div>
    
                    <div class="galerie-conteneur">
                    <div class="images">
                        <a href="#teinte11">
                        <img src="teintes/Teintes compressées/13.png" alt="Vert Forêt"></a></div>                    
                        <div class="nom"><p>Vert Forêt</p></div>
                    </div>
     
                    <div class="galerie-conteneur">
                    <div class="images">
                        <a href="#teinte12">
                        <img src="teintes/Teintes compressées/14.png" alt="Vert Forêt Brush"></a></div>            
                        <div class="nom"><p>Vert Forêt Brush</p></div>
                    </div>
    
                    <div class="galerie-conteneur">
                    <div class="images">
                        <a href="#teinte13">
                        <img src="teintes/Teintes compressées/15.png" alt="Vert Emeraude"></a></div>                    
                        <div class="nom"><p>Vert Emeraude</p></div>
                    </div>
                    
                    <div class="galerie-conteneur">
                    <div class="images">
                        <a href="#teinte14">
                        <img src="teintes/Teintes compressées/16.png" alt="Vert Emeraude Brush"></a></div>                   
                        <div class="nom"><p>Vert Emeraude Brush</p></div>
                    </div>
    
                    <div class="galerie-conteneur">
                    <div class="images">
                        <a href="#teinte15">
                        <img src="teintes/Teintes compressées/17.png" alt="Baby Blue"></a></div>                              
                        <div class="nom"><p>Baby Blue</p></div>
                    </div>
    
                    <div class="galerie-conteneur">
                    <div class="images">
                        <a href="#teinte16">
                        <img src="teintes/Teintes compressées/18.png" alt="Baby Blue Brush"></a></div>                             
                        <div class="nom"><p>Baby Blue Brush</p></div>
                    </div>
    
                    <div class="galerie-conteneur">
                    <div class="images">
                        <a href="#teinte17">
                        <img src="teintes/Teintes compressées/19.png" alt="Lavande"></a></div>                          
                        <div class="nom"><p>Lavande</p></div>
                    </div>
    
                    <div class="galerie-conteneur">
                    <div class="images">
                        <a href="#teinte18">
                        <img src="teintes/Teintes compressées/20.png" alt="Lavande Brush"></a></div>                            
                        <div class="nom"><p>Lavande Brush</p></div>
                    </div>
    
                    <div class="galerie-conteneur">
                    <div class="images">
                        <a href="#teinte19">
                        <img src="teintes/Teintes compressées/21.png" alt="Bordeaux"></a></div>                    
                        <div class="nom"><p>Bordeaux</p></div>
                    </div>
    
                    <div class="galerie-conteneur">
                    <div class="images">
                        <a href="#teinte20">
                        <img src="teintes/Teintes compressées/22.png" alt="Bordeaux Brush"></a></div>                    
                        <div class="nom"><p>Bordeaux Brush</p></div>
                    </div>
    
                    <div class="galerie-conteneur">
                    <div class="images">
                        <a href="#teinte21">
                        <img src="teintes/Teintes compressées/23.png" alt="Rouge"></a></div>                   
                        <div class="nom"><p>Rouge</p></div>
                    </div> 
    
                    <div class="galerie-conteneur">
                    <div class="images">
                        <a href="#teinte22">
                        <img src="teintes/Teintes compressées/24.png" alt="Rouge Brush"></a></div>           
                        <div class="nom"><p>Rouge Brush</p></div>
                    </div> 
    
                    <div class="galerie-conteneur">
                    <div class="images">
                        <a href="#teinte23">
                        <img src="teintes/Teintes compressées/25.png" alt="Beige"></a></div>                            
                        <div class="nom"><p>Beige</p></div>
                    </div> 
    
                    <div class="galerie-conteneur">
                    <div class="images">
                        <a href="#teinte24">
                        <img src="teintes/Teintes compressées/26.png" alt="Beige Brush"></a></div>                    
                        <div class="nom"><p>Beige Brush</p></div>
                    </div> 
    
                    <div class="galerie-conteneur">
                    <div class="images">
                        <a href="#teinte25">
                        <img src="teintes/Teintes compressées/27.png" alt="Bleu Nuit"></a></div>                    
                        <div class="nom"><p>Bleu Nuit</p></div>
                    </div> 
    
                    <div class="galerie-conteneur">
                    <div class="images">
                        <a href="#teinte26">
                        <img src="teintes/Teintes compressées/28.png" alt="Bleu Nuit Brush"></a></div>                    
                        <div class="nom"><p>Bleu Nuit Brush</p></div>
                    </div> 
    
                    <div class="galerie-conteneur">
                    <div class="images">
                        <a href="#teinte27">
                        <img src="teintes/Teintes compressées/29.png" alt="Taupe"></a></div>                    
                        <div class="nom"><p>Taupe</p></div>
                    </div> 
      
                    <div class="galerie-conteneur">
                    <div class="images">
                        <a href="#teinte28">
                        <img src="teintes/Teintes compressées/30.png" alt="Taupe Brush"></a></div>                    
                        <div class="nom"><p>Taupe Brush</p></div>
                    </div> 
    
                    <div class="galerie-conteneur">
                    <div class="images">
                        <a href="#teinte29">
                        <img src="teintes/Teintes compressées/31.png" alt="Ivoire"></a></div>                           
                        <div class="nom"><p>Ivoire</p></div>
                    </div> 
                
                    <div class="galerie-conteneur">
                    <div class="images">
                        <a href="#teinte30">
                        <img src="teintes/Teintes compressées/32.png" alt="Ivoire Brush"></a></div>                    
                        <div class="nom"><p>Ivoire Brush</p></div>
                    </div> 
          
                    <div class="galerie-conteneur">
                    <div class="images">
                        <a href="#teinte31">
                        <img src="teintes/Teintes compressées/33.png" alt="Marron"></a></div>                    
                        <div class="nom"><p>Marron</p></div>
                    </div> 
                  
                    <div class="galerie-conteneur">
                    <div class="images">
                        <a href="#teinte32">
                        <img src="teintes/Teintes compressées/34.png" alt="Marron Brush"></a></div>         
                        <div class="nom"><p>Marron Brush</p></div>
                    </div> 
             
                    <div class="galerie-conteneur">
                    <div class="images">
                        <a href="#teinte33">
                        <img src="teintes/Teintes compressées/35.png" alt="Rose Pâle"></a></div>                    
                        <div class="nom"><p>Rose Pâle</p></div>
                    </div> 
                
                    <div class="galerie-conteneur">
                    <div class="images"> 
                        <a href="#teinte34">
                        <img src="teintes/Teintes compressées/36.png" alt="Rose Pâle Brush"></a></div>                              
                        <div class="nom"><p>Rose Pâle Brush</p></div>
                    </div> 
                   
                    <div class="galerie-conteneur">
                    <div class="images">
                        <a href="#teinte35">
                        <img src="teintes/Teintes compressées/37.png" alt="Rose Violine Light"></a></div>                    
                        <div class="nom"><p>Rose Violine Light</p></div>
                    </div> 
                     
                    <div class="galerie-conteneur">
                    <div class="images">
                        <a href="#teinte36">
                        <img src="teintes/Teintes compressées/38.png" alt="Rose Violine Light Brush"></a></div>                   
                        <div class="nom"><p>Rose Violine Light Brush</p></div>
                    </div> 
                 
                    <div class="galerie-conteneur">
                    <div class="images">
                        <a href="#teinte37">
                        <img src="teintes/Teintes compressées/39.png" alt="Rose Poudré"></a></div>                     
                        <div class="nom"><p>Rose Poudré</p></div>
                    </div> 
                   
                    <div class="galerie-conteneur">
                    <div class="images">
                        <a href="#teinte38">
                        <img src="teintes/Teintes compressées/40.png" alt="Rose Poudré Brush"></a></div>    
                        <div class="nom"><p>Rose Poudré Brush</p></div>
                   
                    </div>   
                </div>
          
            <!--SECTION PERSONNALISATION DU TEXTE-->
        
            <h3>Votre texte</h3>
            <div class="entry-text">
                <p>Choix du Premier texte</p>
                    <label for="topinput"></label>
                    <input type="text" name="Texte de la première ligne" id="firstinput"
                    placeholder="Bienvenue au mariage de" size="60">
            </div>  

            <!--<h4>Couleurs du premier texte</h4>
                <div class="couleursdetexte">
                        <div class="couleur1"></div>    
                        <div class="couleur2"></div> 
                        <div class="couleur3"></div> 
                        <div class="couleur4"></div> 
                        <div class="couleur5"></div> 
                </div>-->
    
                <div class="entry-text">
                    <p>Choix du second texte</p>
                    <label for="bodyinput"></label>
                    <input type="text" name="Texte de la seconde ligne" id="secondinput"
                    placeholder="Laura, Loris" size="60">
                </div>
    
           <!-- <h4>Couleurs du second texte</h4>
                <div class="couleursdetexte">
                        <div class="couleur1"></div>    
                        <div class="couleur2"></div> 
                        <div class="couleur3"></div> 
                        <div class="couleur4"></div> 
                        <div class="couleur5"></div> 
                </div>-->
    
               <div class="entry-text">
                    <p>Choix du troisième texte</p>
                    <label for="bodyinput"></label>
                    <input type="text" name="Texte de la seconde ligne" id="thirdinput"
                    placeholder="et" size="60">
                </div>
    
            <h4>Couleurs du texte</h4>
                <div class="couleursdetexte">
                    
                        <div class="couleur1"></div>    
                        <div class="couleur2"></div> 
                        <div class="couleur3"></div> 
                        <div class="couleur4"></div> 
                        <div class="couleur5"></div> 
                </div><br>
    
                <div class="entry-text">
                    <p>Choix de la date</p>
                    <label for="dateinput"></label>
                    <input type="date" name="start" id="bigday"
                    value="12.10.2022" min="01.01.2023" max="31.12.2023" size="100" cols="60" rows="20">
                </div><br>
    
                <p>Dimension souhaitée</p><br>
                    <label for="bodyinput"></label>
                    <input class="text" name="textbigsmall" id="font-size" type="hidden" disabled><br>                   
                    <div class="dimension">
                        <div class="dimension1">A1</div>
                        <div class="dimension2">A2</div>
                        <div class="dimension3">A3</div>
                        <div class="dimension4">A4</div>
                        <div class="dimension5">A5</div><br>
                    </div><br>
    
                        
    <!--SECTION PERSONNALISATION POLICE-->
         
            <div id="polices"><br>
                <div class="aautosignature">
                    <img src="img\a_auto_signature.png" alt="police a_auto_signature" width="100"></div>
                <div class="aftesto">
                    <img src="img\aftesto1.png" alt="police aftesto" width="100"></div>
                <div class="authenticsignature">
                    <img src="img\authentic signature.png" alt="police authentiqueSignature" width="100"></div>
                <div class="cherolina">
                    <img src="img\Cherolina.png" alt="police Cherolina" width="100"></div>
                <div class="christmascake">
                    <img src="img\Christmas Cake.png" alt="police Christmas" width="100"></div>
                <div class="emillisaotf">
                    <img src="img\Emillisa Otf.png" alt="police Emillisa Otf" width="100"></div>
                <div class="gistesy">
                    <img src="img\Gistesy1.png" alt="police Gistesy" width="100"></div>
                <div class="greatvibes-regular">
                    <img src="img\GreatVibes.png" alt="police Great Vibes-Regular" width="100"></div>
                <div class="highspirited">
                    <img src="img\High Spirited.png" alt="police High Spirited" width="100"></div>
                <div class="islandiademo">
                    <img src="img\Islandia.png" alt="police IslandiaDEMO" width="100"></div>
                <div class="lovelygarden">
                    <img src="img\lovely_garden.png" alt="police Lovely garden" width="150"></div>
                <div class="masvis">
                    <img src="img\Masvis.png" alt="police Masvis" width="100"></div>
                <div class="optimusprinceps">
                    <img src="img\Optimus Princeps.png" alt="police Optimus Princeps" width="150"></div>
            </div>
       
            <div>             
                <textarea name="informations complementaires" id="info" cols="50" rows="10" placeholder="informations complémentaires"></textarea>
            </div>

            <p>Veuillez noter que les couleurs choisies peuvent apparaître différemment selon la résolution d'affichage de vos écrans.</p>

            <div class="accept">
                <label for="acceptation">En cochant cette case, vous acceptez les choix de votre conception</label>
                <input type="checkbox" name="acceptation" id="acceptation">

            </div>
        </div>    
    

    
        


        <!--rajouter encart pour note supplémentaire ou description supplémentaire-->

        <div class="tarifs">   
            <span class="quantité">
                <label for="qté">Qté</label>
                <input type="number" id="Qté" name="Qté">
            </span>
            
            <input type="submit" value="Ajouter au panier">
        
        </div> 
    </div>
      
</div>
   
      <script src="CID.js"></script>
     
</body>
</html>

    mon code CSS :

    body{
    margin: 0;
    font-family: "Avenir Next", sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

/* BOUTON POP UP */

button{
    padding: 7px 20px;
    background: none;
    outline: none;
    border-radius: 5px;
    background-color: #F4CDAE;
}

button a{
    text-decoration: none;
    font-size: 19px;
    color: black;

}

button:hover{
    background: #F4CDAE;
}

button:hover a{
    color: white;
}

/* POP UP */

#box {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
}

#box:target{
    display: block;
}

#modale{
    background-color: #fff9fa;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1000px;
    height: 600px;
    max-width: 80%;
    max-height: 80%;
    border-radius: 6px;
    padding: 5px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    overflow: auto;
    

    
}
#modale a{
    text-decoration: none;
    font-size: 35px;
    font-weight: 600;
    color: #F4CDAE;
    position: absolute;
    top: 10px;
    right: 15px;
   
}

#canvas{
    
    display: flex;
    flex-wrap: wrap;
    max-width: 80%;
    margin: 20px;
    border: 1px solid lightgrey;
    margin-top: 60px;
    background-color: #fdeaea;
    
}

.options{
    
  
    width: 500px;
    max-width: 80%;
    height: 400px;
    max-height: 80%;
    border: 2px solid #d2d4dc;
    padding: 5px;
    overflow-x: hidden;
    overflow-y: scroll;
    flex-shrink: 0;
    margin-top: 40px;
    
    
        
}

/* SECTION PERSONNALISATION COULEUR DE FONDS*/



.conteneur-coloris-fonds{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    text-align: center;
    font-weight: bold;
    justify-content: center;
    

}    

.galerie-conteneur{
    position:relative;
    justify-content:center;
    align-items: center;
    display: flex;
    
}

.galerie-conteneur .images img{
    width: 4rem;
    height: 3rem; 
    border: 1px solid lightgrey;
    box-shadow: 2px 2px 2px lightgrey;
    
   
}   

/*TEXTE EN SURVOL*/



.galerie-conteneur p{
    
    border-radius: 10px;
    background-color: #f5d7bd;
    color: rgb(0, 0, 0);
    font-size: 13px;
    position: relative;
    width: 5rem;
    height: 3rem;
    padding-top: 5px;
    transform: scale(0); 
    justify-content: center;
    text-align: center;
    
    
}

/*SECTION PERSONNALISATION COULEUR DE TEXTE*/


#firstinput{
    display: flex;
    color:rgb(77, 77, 77);
    flex-wrap: wrap;
    font-size: small;

}


#secondinput{ 
    display: flex;
    color:rgb(77, 77, 77);
    flex-wrap: wrap;
    font-size: small;
}

#thirdinput{ 
    display: flex;
    color:rgb(77, 77, 77);
    flex-wrap: wrap;
    font-size: small;
}

.couleursdetexte1{
    margin-top: 5px;
    margin-bottom: 15px;
    display: flex;
    color: #8D8E93;

}    


.couleursdetexte2{
    margin-top: 5px;
    margin-bottom: 15px;
    display: flex;
    color: #8D8E93;
    
}

.couleursdetexte3{
    margin-top: 5px;
    margin-bottom: 15px;
    display: flex;
    color: #8D8E93;
    
}


.couleur1{
    content: "";
    width: 2rem;
    height: 2rem;
    border-radius:50% 50% 50% 50% / 50% 50% 50% 50% ;
    border: 1px solid ;
    background-color: #000000;
    display: flex;
    flex-wrap: wrap;
    margin-left: 10px;
    cursor: pointer;
    float: left;
   
   
}

.couleur2{
    content: "";
    width: 2rem;
    height: 2rem;
    border-radius:50% 50% 50% 50% / 50% 50% 50% 50% ;
    border: 1px solid #000000;
    background-color: #ffffff;
    display: flex;
    flex-wrap: wrap;
    margin-left: 10px;
    cursor: pointer;
    float: left;
}

.couleur3{
    content: "";
    width: 2rem;
    height: 2rem;
    border-radius:50% 50% 50% 50% / 50% 50% 50% 50% ;
    border: 1px solid #000000;
    background-color: #8D8E93;
    display: flex;
    flex-wrap: wrap;
    margin-left: 10px;
    cursor: pointer;
    float: left;
}

.couleur4{
    content: "";
    width: 2rem;
    height: 2rem;
    border-radius:50% 50% 50% 50% / 50% 50% 50% 50% ;
    border: 1px solid #000000;
    background-color: #F2DEA0;
    display: flex;
    flex-wrap: wrap;
    margin-left: 10px;
    cursor: pointer;
    float: left;
}

.couleur5{
    content: "";
    width: 2rem;
    height: 2rem;
    border-radius:50% 50% 50% 50% / 50% 50% 50% 50% ;
    border: 1px solid #000000;
    background-color:#fad2d3 ;
    display: flex;
    flex-wrap: wrap;
    cursor: pointer;
    margin-left: 10px;
    float: left;
    
    

}

h2{
    display: flex;
    font-weight: 400;
    color: #8D8E93;
    text-decoration: underline;
}



h3{
    
    display: flex;
    flex-wrap: wrap;
    font-weight: 300;
    color: #8D8E93;
    
}


h4{
    display: flex;
    flex-wrap: wrap;
    font-weight: 300;
    color: #8D8E93;
}



#info{
    display: flex;
    flex-wrap: wrap;
    float: left;
    margin-top: 1,25rem;
    margin-left: 5px;

}

.dimension1{
    border: 1px solid #ddd;
    border-radius: 2px;
    padding: 10px 10px;
    cursor: pointer;
    float: left;
    margin: 7px;
    color: #8D8E93;
}      

.dimension2{
    border: 1px solid #ddd;
    border-radius: 2px;
    padding: 10px 10px;
    cursor: pointer;
    float: left;
    margin: 7px;
    color: #8D8E93;
}      

.dimension3{
    border: 1px solid #ddd;
    border-radius: 2px;
    padding: 10px 10px;
    cursor: pointer;
    float: left;
    margin: 7px;
    color: #8D8E93;
}      

.dimension4{
    border: 1px solid #ddd;
    border-radius: 2px;
    padding: 10px 10px;
    cursor: pointer;
    float: left;
    margin: 7px;
    color: #8D8E93;
}      

.dimension5{
    border: 1px solid #ddd;
    border-radius: 2px;
    padding: 10px 10px;
    cursor: pointer;
    float: left;
    margin: 7px;
    color: #8D8E93;
}      

.dimension1:hover{
    background-color: #f6e7e8;
}

.dimension2:hover{
    background-color: #f6e7e8;
}

.dimension3:hover{
    background-color: #f6e7e8;
}

.dimension4:hover{
    background-color: #f6e7e8;
}

.dimension5:hover{
    background-color: #f6e7e8;
}

/*SECTION PERSONNALISATION POLICE DE TEXTE*/

.entry-text{
    margin: 10px;
}




#polices img{
  
    float:left;
    margin: 10px 10px;
    width: 6rem;
    height: 2rem;
        

}

#polices img:hover{
    background-color: #f6e7e8;
    cursor: pointer;
}

textarea{
    display: flex;
    margin: 10px;
}


input[type="number"]{
    
    color: #000000;
    width: 50px;
    height: 30px;
    
}

input[type="submit"]{
    
    background-color:#F4CDAE ;
    color: #000000;
    border: 1px solid #F4CDAE ;
    cursor: pointer;
    width: 130px;
    height: 30px;
    font-size:1rem;
}

input[type="submit"]:hover{
    color: #ffffff;
   
}

p{
    display: flex;
    flex-wrap: wrap;
    float: left;
    font-weight: 600;
    font-size: 0.9rem;
    color: #7e7f83;
}

.accept{
    display: flex;
    flex-wrap: wrap;
    float: left;
    font-size: 0.9rem;
    color: #7e7f83;
}

    mon javascript:

    const canvas = document.querySelector('canvas')
const ctx = canvas.getContext('2d')




canvas.width = 400
canvas.height = 400


// DESSINE L'IMAGE DE FOND:

//function setupCanvas(){

    //const img = new Image();
    //img.src = 'teintes/Teintes compressées/3.png';
    //img.addEventListener("load", function(){
        //ctx.drawImage(img,0, 0, 400, 300, 100, 80, 200, 200,);
       
    //})
//}
//setupCanvas()

// DESSINE UN RECTANGLE


ctx.fillStyle='#FAD2D3';
ctx.lineWidth=(1);
ctx.fillRect(100, 130, 200, 230);

// DESSINE UN ARC

ctx.beginPath();
ctx.arc(200,130,100,0,Math.PI,true);
ctx.fillStyle=('#FAD2D3')
ctx.stroke=('#FAD2D3');
ctx.fill();
ctx.closePath();


 // DESSINE LE TEXTE PAR DESSUS L'IMAGE DE FOND:
 ctx.font='25pt Masvis, serif';
 ctx.textBaseline="bottom";
 ctx.fillStyle='black';
 ctx.fillText('LAURA', 110, 180);
 ctx.fillText('LORIS', 110, 270);

 ctx.font='25pt a_auto_signature, serif';
 ctx.fillText('and', 120, 220);

 ctx.font='12pt Verdana, Arial, serif';
 ctx.fillText('12.10.2022', 110, 340);



 // AFFICHER CHOIX IMAGE




 // CHOIX DES COULEURS

 function show(police1) {
    if (document.getElementById)
    document.getElementById(police1).style.display = "block";
    }
//function hide(police1) {
   // if (document.getElementById)
    //document.getElementById(o).style.display = "none";
   // }

 
  // dessine le canvas
 draw()

    Merci par avance pour votre aide



    • Partager sur Facebook
    • Partager sur Twitter

    Ajouter de l'interactivité à une pop up

    × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
    × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
    • Editeur ●
    • Markdown