Color and Transparency

Contact Us or call 1-877-932-8228
Color and Transparency

Color and Transparency

As we saw above, we can set colors using the fillStyle and strokeStyle properties. For best support, when naming colors, choose from the following:

  1. Color names (e.g., red, green, deeppink)
  2. Hex colors (e.g., #ff0000, #008000, #ff1493)
  3. Shortened hex colors (e.g., #f00, #080, #f19)
  4. RGB functional notation (e.g., rgb(255,0,0), rgb(0,128,0), rgb(255,20,147))

Transparency

It is possible to make our strokes and fills semi-transparent using the rgba(r,g,b,a) (a for alpha) functional syntax:

  • A value of 1 for a means fully opaque.
  • A value of 0 for a means fully transparent.

Code Sample:

html5-canvas/Demos/transparency.html
<!DOCTYPE HTML>
---- C O D E   O M I T T E D ----

	if (canvas.getContext) {
		context = canvas.getContext("2d");
		context.fillStyle = "rgba(255,0,0,1)";
		context.beginPath();
		context.moveTo(0,0);
		context.lineTo(200,0);
		context.lineTo(100,200);
		context.fill();
		context.fillStyle = "rgba(0,0,255,.3)";
		context.beginPath();
		context.moveTo(0,200);
		context.lineTo(200,200);
		context.lineTo(100,0);
		context.fill();
	}
---- C O D E   O M I T T E D ----

This will render as follows: Transparent Fills

Next