Fadıl

Publications

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.

Today most of the browsers use a flash plugin to play the videos. This works pretty well but Flash, unfortunately, requires a lot of computing power. This would be an issue if the system has a low-end configuration Hence the new web standard HTML5 is trying to change that.
HTML5 has been designed with audio and video codecs which take less processing power its equivalent Flash player which rules the browsers audio and video plugin. As with most new technologies, things are not always clearcut.
HTML5 is the largest ever opensource project undertaken by W3C. Hence we can expect some terrific improvements in processing efficiency from HTML5, it should not be assumed that it will completely replace Flash or even have a critical impact, especially on rich web content. Flash still has many advantages such as.

Fadıl

Publications

Canvas Element transformations

HTML5 canvas element

Canvas Examples-Intersecting rectangles

Canvas Examples -Using Paths

HTML5 vs Flash