HTML5 Game - Drawing the Logo

  1. HOME
  2. HTML5 Game
  3. Canvas Shape
  4. Logo

Description

Drawing the Logo

Demo

ResultView the demo in separate window 

<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>AwesomeCo Logo Test</title>
  </head>/*w ww .  ja  va 2 s  .  co  m*/
  <body>
      <canvas id="logo" width="900" height="80">
        <h1>AwesomeCo</h1>
      </canvas>
      <script>
      let drawLogo = function(){
        let canvas = document.getElementById("logo");
        let context = canvas.getContext("2d");
        
        context.fillStyle = "blue";
        context.strokeStyle = "#FF0000";
      
        context.lineWidth = 2;
        context.beginPath();
        context.moveTo(0, 40); 
        context.lineTo(60, 40 );
        context.lineTo(285, 40 );
        
        context.fill();   
        context.closePath();
        
        context.font = "italic 40px 'Arial'";
        context.fillText("java2s.com", 60, 36);
            
        context.save();
        context.translate(20,20);
        context.fillRect(0,0,20,20); 
        
        context.fillStyle    = "red";
        context.strokeStyle = "#FFFFFF";
        
        context.lineWidth = 2;
        context.beginPath();
        context.moveTo(0, 20); 
        context.lineTo(10, 0);
        context.lineTo(20, 20 );
        context.lineTo(0, 20 );
        
        context.fill();
        context.closePath();
        context.restore();
            
     };
     
     let canvas = document.getElementById("logo");
     
     if (canvas.getContext){
       drawLogo();
     }
     </script>
  </body>
</html>

Related Topic