HTML5 Game - Colors and transparency

Introduction

You can use

RGB (red/green/blue)
RGBA (red/green/blue/alpha)
HSL (hue/saturation/lightness)
HSLA (hue/saturation/lightness/alpha)
hexadecimal notations for RGB
color names such as yellow, silver, or teal.

Additionally, you can specify SVG 1.0 color names such as goldenrod, darksalmon, or chocolate.

Here are some more examples of color strings:

#ffffff 
#642 
rgba(100,100,100,0.8) 
rgb(255,255,0) 
hsl(20,62%,28%) 
hsla(40,82%,33%,0.6) 
antiquewhite 
burlywood 
cadetblue

Demo

ResultView the demo in separate window

<!DOCTYPE html>
   <head>
     <title>Colors and Transparency</title>

      <style> 
         body {//from w w w. j a v a 2  s  .  c  o  m
            background: #dddddd;
         }

         #canvas {
            background: #eeeeee;
            border: thin solid #aaaaaa;
         }
      </style>
   </head>

  <body>
    <canvas id='canvas' width='600' height='400'>
      Canvas not supported
    </canvas>

    <script>


let canvas = document.getElementById('canvas'),
    context = canvas.getContext('2d');

context.lineJoin = 'round';
context.lineWidth = 30;

context.font = '24px Helvetica';
context.fillText('Click anywhere to erase', 175, 200);

context.strokeStyle = 'goldenrod';
context.fillStyle = 'rgba(0, 0, 255, 0.5)';

context.strokeRect(75, 100, 200, 200);
context.fillRect(325, 100, 200, 200);

context.canvas.onmousedown = function (e) {
   context.clearRect(0, 0, canvas.width, canvas.height);
};
    
    </script>
  </body>
</html>

HTML5 Game - Colors and transparency

Introduction

Demo

Related Topic