Skip to main content

HTML5 Smiley Face Using Canvas

HTML5 example to create Smiley Face Using Canvas,HTML5 Canvas tutorial, Smiley Face Using Canvas, HTML5 example Smiley Face Using Canvas with source code, step by step tutorial  to create Smiley Face,

html5 example source code to draw smiley Face using canvas

html5 example source code to draw smiley Face using canvas Download









  

HTML Smiley Face Using Canvas Complete Source Code is Follow









<! DOCTYPE html>
<html lang ="en">
<head>
<style>
#myCanvas { background-color:#DEB887;
                       border:3px solid black;
         width:900px;
         height:600px;
                     }
</style>
</head>
<body>
    <canvas id="myCanvas">
        browser not support
   </canvas>
     <script>

          var c=document.getElementById("myCanvas");


          var ctx =c.getContext("2d");

ctx.fillStyle='#C71585';
ctx.font='Arial 50px';
ctx.fillText('keep smiling . . .',200,100);
ctx.strokeText('keep smiling . . .',300,400);

//For Yellow Circles

     
     ctx.beginPath();
            ctx.arc(40,33,15,0,2*Math.PI);
            ctx.fillStyle="yellow";
            ctx.fill();
            ctx.stroke();
       ctx.closePath();

       ctx.beginPath();
            ctx.arc(55,25,15,0,2*Math.PI);
            ctx.fillStyle="yellow";
            ctx.fill();
            ctx.stroke();
       ctx.closePath();


       ctx.beginPath();
            ctx.arc(70,20,14,0,2*Math.PI);
            ctx.fillStyle="yellow";
            ctx.fill();
            ctx.stroke();
       ctx.closePath();


       ctx.beginPath();
            ctx.arc(85,20,14,0,2*Math.PI);
            ctx.fillStyle="yellow";
            ctx.fill();
            ctx.stroke();
       ctx.closePath();


       ctx.beginPath();
            ctx.arc(100,25,14,0,2*Math.PI);
            ctx.fillStyle="yellow";
            ctx.fill();
            ctx.stroke();
       ctx.closePath();


       ctx.beginPath();
            ctx.arc(115,35,14,0,2*Math.PI);
            ctx.fillStyle="yellow";
            ctx.fill();
            ctx.stroke();
       ctx.closePath();

       ctx.beginPath();
            ctx.arc(125,50,14,0,2*Math.PI);
            ctx.fillStyle="yellow";
            ctx.fill();
            ctx.stroke();
       ctx.closePath();

       ctx.beginPath();
            ctx.arc(130,65,14,0,2*Math.PI);
            ctx.fillStyle="yellow";
            ctx.fill();
            ctx.stroke();
       ctx.closePath();

       ctx.beginPath();
            ctx.arc(130,80,14,0,2*Math.PI);
            ctx.fillStyle="yellow";
            ctx.fill();
            ctx.stroke();
       ctx.closePath();

       ctx.beginPath();
            ctx.arc(125,95,14,0,2*Math.PI);
            ctx.fillStyle="yellow";
            ctx.fill();
            ctx.stroke();
       ctx.closePath();

       ctx.beginPath();
            ctx.arc(120,110,14,0,2*Math.PI);
            ctx.fillStyle="yellow";
            ctx.fill();
            ctx.stroke();
       ctx.closePath();

       ctx.beginPath();
            ctx.arc(110,120,14,0,2*Math.PI);
            ctx.fillStyle="yellow";
            ctx.fill();
            ctx.stroke();
       ctx.closePath();

       ctx.beginPath();
            ctx.arc(100,130,14,0,2*Math.PI);
            ctx.fillStyle="yellow";
            ctx.fill();
            ctx.stroke();
       ctx.closePath();

       ctx.beginPath();
            ctx.arc(85,135,14,0,2*Math.PI);
            ctx.fillStyle="yellow";
            ctx.fill();
            ctx.stroke();
       ctx.closePath();

       ctx.beginPath();
            ctx.arc(70,135,14,0,2*Math.PI);
            ctx.fillStyle="yellow";
            ctx.fill();
            ctx.stroke();
       ctx.closePath();

       ctx.beginPath();
            ctx.arc(55,130,14,0,2*Math.PI);
            ctx.fillStyle="yellow";
            ctx.fill();
            ctx.stroke();
       ctx.closePath();

      ctx.beginPath();
            ctx.arc(40,125,14,0,2*Math.PI);
            ctx.fillStyle="yellow";
            ctx.fill();
            ctx.stroke();
       ctx.closePath();

      ctx.beginPath();
            ctx.arc(30,115,14,0,2*Math.PI);
            ctx.fillStyle="yellow";
            ctx.fill();
            ctx.stroke();
       ctx.closePath();

      ctx.beginPath();
            ctx.arc(25,100,14,0,2*Math.PI);
            ctx.fillStyle="yellow";
            ctx.fill();
            ctx.stroke();
       ctx.closePath();

       ctx.beginPath();
            ctx.arc(20,85,14,0,2*Math.PI);
            ctx.fillStyle="yellow";
            ctx.fill();
            ctx.stroke();
        ctx.closePath();

        ctx.beginPath();
            ctx.arc(20,70,14,0,2*Math.PI);
            ctx.fillStyle="yellow";
            ctx.fill();
            ctx.stroke();
       ctx.closePath();

       ctx.beginPath();
            ctx.arc(25,50,14,0,2*Math.PI);
            ctx.fillStyle="yellow";
            ctx.fill();
            ctx.stroke();
       ctx.closePath();





//For Inner Circle

        ctx.beginPath();
            ctx.arc(75,75,50,0,2*Math.PI);
            ctx.fillStyle="blue";
            ctx.fill();
            ctx.stroke();
       ctx.closePath();

//For Second Inner Circle

       ctx.beginPath();
            ctx.arc(75,75,35,0,2*Math.PI);
            ctx.fillStyle="orange";
            ctx.fill();
            ctx.stroke();
        ctx.closePath();

// For First Eye

      ctx.beginPath();
        ctx.arc(60,65,5,0,2*Math.PI);
        ctx.fillStyle="black";
        ctx.fill();
        ctx.stroke();
      ctx.closePath();

// For First White Part

     ctx.beginPath();
        ctx.arc(60,65,2,0,2*Math.PI);
        ctx.fillStyle="white";
        ctx.fill();
        ctx.stroke();
      ctx.closePath();

//For Second Eye

     ctx.beginPath();  
        ctx.arc(90,65,5,0,2*Math.PI);
        ctx.fillStyle="black";
        ctx.fill();
        ctx.stroke();
     ctx.closePath();

//For Second White Part

     ctx.beginPath();
        ctx.arc(90,65,2,0,2*Math.PI);
        ctx.fillStyle="white";
        ctx.fill();
        ctx.stroke();
      ctx.closePath();


     ctx.beginPath();
        ctx.arcTo(75,110,105,70,20);
        ctx.fillStyle="red";
        ctx.fill();
        ctx.stroke();
     ctx.closePath();
        

 // For Lips
           
         ctx.strokestyle="red";
         ctx.fillStyle="red";
        

         ctx.ShadowColor="white";
         ctx.ShadowBlur="30";
          ctx.fill();
         ctx.stroke();


        </script>
Shaikh Ribana MCA II FS
         </body>
           </html>






   
        browser not support
  

    

        
          



Download Example With source code

Assinement By Shaikh Ribana MCA II FS ( Imscdr, Ahmednagar)
HTML5 Css3 Session 2015

HTML5 example to create Smiley Face Using Canvas,HTML5 Canvas tutorial, Smiley Face Using Canvas, HTML5 example Smiley Face Using Canvas with source code, step by step tutorial  to create Smiley Face,

html5 example source code to draw smiley Face using canvas

html5 example source code to draw smiley Face using canvas Download

Download Canvas Example

 

 

Popular posts from this blog

Design Marathi website Using HTML CSS

          Design Marathi website Using HTML CSS,मराठी वेबसाईट designing HTML ,step by step Marathi website, how to display Marathi content in your website, Design Marathi website step by step , Marathi website using HTML and CSS, How To Design website using different Languages  Design Marathi website Using HTML CSS, Design Marathi website Using PHP, Design Marathi website Using JSP, Design Marathi website Using ASP, Design Marathi website Using C# Dot Net, Design Marathi website Using Vb Dot Net, मराठी वेबसाईट मराठी वेबसाईट बनवन अगदी सोप आहे मी या ब्लॉग मध्ये दिलेल्या स्टेप्स वापरून तुम्ही काही क्षणात मराठी वेब पेज तयार करू शकता  Design Marathi website Using HTML CSS,मराठी वेबसाईट designing HTML ,step by step Marathi website, how to display Marathi content in your website, Design Marathi website step by step , Marathi website using HTML and CSS, How To Design website using different Languages    Design Marathi website U

what is Blogger

what is Blogger, what is Blogger short info, Blogger hindi information,  Blogger.com एक फ्री Blog Publishing Platform है. जिसकी सहायता से Free Blog बनाकर Texts, Images, Videos आदि आसानी से शेयर की जा सकती है. और दुनिया को अपने लेखन कौशल से अवगत कराया जा सकता है. Blogger की गिनती Content Management Systems में होती है. क्योंकि यह Content को Yearly, Monthly, Weekly, Daily, Catigarically, Labels आदि के द्वारा Manage करता है. और ये सभी Entry पाठकों के लिए उपलब्ध रहती है. Google Blogger Kya Hai in Hindi Blogger पर जो ब्लॉग बनाया जाता है. वह blogspot.com का Sub-Domain होता है. जो Google Server पर Hosted रहता है. Blogger Users गूगल सर्वर को Access नही कर पाते है. लेकिन गूगल अकाउंट से उन्हे Blogger Dashboard पर अनुमति मिल जाती है. इसलिए वे अपना Blog Manage आसानी से कर सकते. Blogspot.com के अलावा Users को Country Specifit Domain Name भी उपलब्ध करवाया जाता है. मिसाल के तौर पर एक Indian Blogger Users अगर अपना ब्लॉग बनाता है तो वह blogspot.com के स्थान पर blogspot.in का चुनाव कर

how to add a youtube video to your website html

embed youtube video in html without iframe,html embed youtube video,how to insert a video in html from computer,iframe video autoplay in html,embed video html,youtube embed code generator,youtube refused to connect html,how to insert mp4 video in html, Use following steps 1. Create basic html page 2. Login to your Google account 3. Visit  www.youtube.com 4. Search video you want to add in your website 5. Select video  6. Click on share button at bottom  you can see share option   7. Click on embed as shown  8. Copy code and paste in html page save and run html page  embed youtube video in html without iframe,html embed youtube video,how to insert a video in html from computer,iframe video autoplay in html,embed video html,youtube embed code generator,youtube refused to connect html,how to insert mp4 video in html,