TechSoftCenter

Canvas elements can be used to give colors also in the previous post we discussed various drawing functionalities in a canvas element. In this post, we shall discuss the coloring features in the canvas element.

Colors

There are two properties that canvas element provide us to apply colors to shapes

fillStyle = color
strokeStyle = color

strokeStyle parameter helps in defining the outline color of the shape.
lifestyle parameter helps in coloring inside the shape.
Any CSS color code can be used here.
//these all set the fillStyle to 'orange' ctx.fillStyle = "orange"; ctx.fillStyle = "#FFA500"; ctx.fillStyle = "rgb(255,165,0)"; ctx.fillStyle = "rgba(255,165,0,1)";

In the previous posts, we discussed using images and also applying styles and colors. In this post, we shall discuss using canvas transformations.
When we talk about transformations in Canvas element we have to deal with two main concepts they are

save()
restore()

The above-mentioned methods are used to save and retrieve the canvas states. The canvas states are stored onto a stack. Every time the save method is called, the current drawing state is pushed onto the stack. A drawing state consists of transformations, stroke style, fill style, linewidth shadow blur values. When the restoration method is called the last saved state is taken from the stack and is exhibited.

The HTML5 Canvas element is an HTML tag similar to the <div>, <a>, or <table> tag, with the exception that its contents are rendered with JavaScript. In other words, in order to leverage the HTML5 Canvas, you’ll need to place the canvas tag somewhere inside your HTML, create an initializer JavaScript function that accesses the canvas tag once the page loads, and then utilize the HTML5 Canvas API to draw your visualizations.

Here is a simple example using a canvas that can be used to draw two intersecting rectangles.

The following sample code is indicated by.

&lt;script type="text/javascript"&gt;// &lt;![CDATA[

function draw() {
 var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");

 ctx.fillStyle = "rgb200,0,0)";
 ctx.fillRect (55, 10, 55, 50);

 ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
 ctx.fillRect (30, 30, 20, 50);
}

// ]]&gt;&lt;/script&gt;

 &lt;canvas id="canvas" width="300" height="300"&gt;&lt;/canvas&gt;

The draw function gets the canvas element, at that point gets the 2d setting. The ctx question would then be able to be utilized to really render to the canvas. The precedent basically fills two square shapes, by setting fillStyle to two unique hues utilizing CSS shading particulars and calling fillRect. The second fillStyle utilizes rgba() to determine an alpha incentive alongside the color.

The beginPath the function starts a new path, and moveTo, lineTo, arcTo, arc, and similar methods are used to add segments to the path. The path can be closed using closePath. Once a path is created, you can use fill or stroke to render the path to the canvas.

&lt;html&gt;
 &lt;head&gt;
  &lt;script type="application/javascript"&gt;
function draw() {
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");

  ctx.fillStyle = "red";

  ctx.beginPath();
  ctx.moveTo(30, 30);
  ctx.lineTo(150, 150);
  // was: ctx.quadraticCurveTo(60, 70, 70, 150); which is wrong.
  ctx.bezierCurveTo(60, 70, 60, 70, 70, 150); 
 // &lt;- this is right formula for the image on the right -&gt;
  ctx.lineTo(30, 30);
  ctx.fill();
}
   &lt;/script&gt;
 &lt;/head&gt;
 &lt;body onload="draw()"&gt;
   &lt;canvas id="canvas" width="300" height="300"&gt;&lt;/canvas&gt;
 &lt;/body&gt;
&lt;/html&gt;

Calling fill() or stroke() causes the current path to be used. To be filled or stroked again, the path must be recreated.

Applying styles and colors using canvas

Canvas Element transformations

HTML5 canvas element

Canvas Examples-Intersecting rectangles

Canvas Examples -Using Paths