Copyright © tutorialspoint.com

HTML5 Canvas - Styles and Colors

previous next


Advertisements

HTML5 canvas provides following two important properties to apply colors to a shape:

SNMethod and Description
1fillStyle
This attribute represents the color or style to use inside the shapes.
2 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.

A fillStyle Example:

Following is a simple example which makes use of above mentioned fillStyle attribute to create a nice pattern.

<!DOCTYPE HTML>
<html>
<head>
<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 onload="drawShape();">
   <canvas id="mycanvas"></canvas>
</body>
</html>

The above example would produce following result

Canvas fillStyle

To learn above concept - Do Online Practice using latest version of either Safari or Opera.

A strokeStyle Example:

Following is a simple example which makes use of above mentioned fillStyle attribute to create another nice pattern.

<!DOCTYPE HTML>
<html>
<head>
<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 onload="drawShape();">
   <canvas id="mycanvas"></canvas>
</body>
</html>

The above example would produce following result

Canvas strokeStyle

To learn above concept - Do Online Practice using latest version of either Safari or Opera.


previous next

Copyright © tutorialspoint.com