# Add color to graphics using HTML Canvas
Black is getting boring, let’s add some color to our shapes. We can use the `fillStyle` method on our context to add colors. We will look at using color names, hex values, and rgba values to add colors to our graphics.
## Code Example
- https://plnkr.co/edit/gsyKbu1szhTk9pqnJIez?p=preview
## Resource
- https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors
<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <h1>Add color to graphics using HTML Canvas</h1>
    <canvas id="canvas"></canvas>
    
    <script src="script.js"></script>
  </body>

</html>
const canvas = document.querySelector('#canvas');
const context = canvas.getContext("2d");
// context.fillStyle = 'pink';
// context.fillStyle = 'rgb(255, 192, 203)';
// context.fillStyle = 'rgba(255, 192, 203, 1)';
context.fillStyle = '#ffc0cb';
context.fillRect(0, 0, canvas.width, canvas.height);
canvas {
  width: 500px;
  height: 500px;
}