askvity

What is the code for yellow in canvas?

Published in Canvas Colors 2 mins read

The hex code for yellow in canvas is #FFFF00.

Understanding Color Codes in Canvas

When working with HTML5 canvas, you use color codes to define the colors of shapes, text, and backgrounds. The most common way to specify colors is using hexadecimal (hex) codes. Hex codes are six-digit numbers, often prefixed with a hash symbol (#), where the first two digits represent the red component, the next two the green component, and the last two the blue component of the color.

How #FFFF00 Defines Yellow

The hex code #FFFF00 represents yellow because:

  • FF represents the maximum intensity of red.
  • FF represents the maximum intensity of green.
  • 00 represents the absence of blue.

When red and green are combined at their maximum intensity and blue is absent, the result is the color yellow.

Example of Usage

Here's a simple JavaScript code snippet demonstrating how to use the hex code to set the fill color to yellow:

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML canvas tag.</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FFFF00";
ctx.fillRect(20, 20, 150, 50);
</script>

</body>
</html>

In this example, we:

  1. Get the canvas element using document.getElementById("myCanvas").
  2. Get the 2D rendering context using c.getContext("2d").
  3. Set the fill style to yellow using ctx.fillStyle = "#FFFF00".
  4. Draw a filled rectangle using ctx.fillRect(20, 20, 150, 50).

This will render a yellow rectangle on the canvas.

Related Articles