HTML5 Canvas - Styles and Colors

HTML5 canvas provides the following two important properties to apply colors to a shape −
fillStyle
This attribute represents the color or style to use inside the shapes.
strokeStyle
This attribute represents the color or style to use for the lines around shapes.
By default, the stroke and fill color are set to black which is CSS color value #000000.
Following is a simple example which makes use of the above-mentioned fillStyle attribute to create a nice pattern.
<!DOCTYPE HTML>

<html>
   <head>
      
      <style>
         #test {
            width: 100px;
            height:100px;
            margin: 0px auto;
         }
      </style>
      
      <script type = "text/javascript">
         function drawShape() {
            
            // get the canvas element using the DOM
            var canvas = document.getElementById('mycanvas');
            
            // Make sure we don't execute when canvas isn't supported
            if (canvas.getContext) {
               
               // use getContext to use the canvas for drawing
               var ctx = canvas.getContext('2d');
               
               // Create a pattern
               for (var i = 0;i<7;i++) {
                  
                  for (var j = 0;j<7;j++) {   
                     ctx.fillStyle = 'rgb(' + Math.floor(255-20.5*i)+ ','+ 
                     Math.floor(255 - 42.5*j) + ',255)';
                     ctx.fillRect( j*25, i* 25, 55, 55 );
                  }
               }
            } else {
               alert('You need Safari or Firefox 1.5+ to see this demo.');
            }
         }
      </script>
   </head>
   
   <body id = "test" onload = "drawShape();">
      <canvas id = "mycanvas"></canvas>
   </body>

</html>
The above example would produce the following result −
Following is a simple example which makes use of the above-mentioned fillStyle attribute to create another nice pattern.
<!DOCTYPE HTML>

<html>
   <head>
      
      <style>
         #test {
            width: 100px;
            height:100px;
            margin: 0px auto;
         }
      </style>
      <script type = "text/javascript">
         function drawShape() {
         
            // get the canvas element using the DOM
            var canvas = document.getElementById('mycanvas');
             
            // Make sure we don't execute when canvas isn't supported
            if (canvas.getContext) {
             
               // use getContext to use the canvas for drawing
               var ctx = canvas.getContext('2d');
               
               // Create a pattern
               for (var i = 0;i<10;i++) {
               
                  for (var j = 0;j<10;j++) {
                     ctx.strokeStyle = 'rgb(255,'+ Math.floor(50-2.5*i)+','+ 
                     Math.floor(155 - 22.5 * j ) + ')';
                     ctx.beginPath();
                     ctx.arc(1.5+j*25, 1.5 + i*25,10,10,Math.PI*5.5, true);
                     ctx.stroke();
                  }
               }
            } else {
               alert('You need Safari or Firefox 1.5+ to see this demo.');
            }
         }
      </script>
   </head>
   
   <body id = "test" onload = "drawShape();">
      <canvas id = "mycanvas"></canvas>
   </body>
   
</html>
The above example would produce the following result −

    19 Lectures 
     2 hours 

 Anadi Sharma

    16 Lectures 
     1.5 hours 

 Anadi Sharma

    18 Lectures 
     1.5 hours 

 Frahaan Hussain

    57 Lectures 
     5.5 hours 

 DigiFisk (Programming Is Fun)

    54 Lectures 
     6 hours 

 DigiFisk (Programming Is Fun)

    45 Lectures 
     5.5 hours 

 DigiFisk (Programming Is Fun)
 Print
 Add Notes
 Bookmark this page