{Tutorial}HTML5 Canvas.Step 25.

[MrHotFire]

What is Canvas?

 

The HTML5 <canvas> element is used to draw graphics, on the fly, via scripting (usually JavaScript).

 

The <canvas> element is only a container for graphics. You must use a script to actually draw the graphics.

 

Canvas has several methods for drawing paths, boxes, circles, characters, and adding images.

Browser Support

 

Internet Explorer,Firefox,Opera,Google Chrome,Safari

 

Internet Explorer 9, Firefox, Opera, Chrome, and Safari support the <canvas> element.

 

Note: Internet Explorer 8 and earlier versions, do not support the <canvas> element.

Create a Canvas

 

A canvas is a rectangular area on an HTML page, and it is specified with the <canvas> element.

 

Note: By default, the <canvas> element has no border and no content.

 

The markup looks like this:

<canvas id="myCanvas" width="200" height="100"></canvas> 

Note: Always specify an id attribute (to be referred to in a script), and a width and height attribute to define the size of the canvas.

 

Tip: You can have multiple <canvas> elements on one HTML page.

 

To add a border, use the style attribute:

<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas> 

 

Draw Onto The Canvas With JavaScript

 

All drawing on the canvas must be done inside a JavaScript:

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

Example explained:

 

First, find the <canvas> element:

var c=document.getElementById("myCanvas"); 

Then, call its getContext() method (you must pass the string "2d" to the getContext() method):

var ctx=c.getContext("2d"); 

The fillStyle property can be a CSS color, a gradient, or a pattern. The default fillStyle is #000000 (black).

 

The fillRect(x,y,width,height) method draws a rectangle filled with the current fill style.

Canvas Coordinates

 

The canvas is a two-dimensional grid.

 

The upper-left corner of the canvas has coordinate (0,0)

 

So, the fillRect() method above had the parameters (0,0,150,75).

 

This means: Start at the upper-left corner (0,0) and draw a 150x75 pixels rectangle.

 

Canvas - Paths

To draw straight lines on a canvas, we will use the following two methods:

 

    moveTo(x,y) defines the starting point of the line

    lineTo(x,y) defines the ending point of the line

 

To actually draw the line, we must use one of the "ink" methods, like stroke().

 

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo([i]0,0[/i]);
ctx.lineTo([i]300,150[/i]);
ctx.stroke();

 

To draw a circle on a canvas, we will use the following method:

 

    arc(x,y,r,start,stop)

 

To actually draw the circle, we must use one of the "ink" methods, like stroke() or fill().

 

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc([i]95,50,40,0,2*Math.PI[/i]);
ctx.stroke();

Canvas - Text

 

To draw text on a canvas, the most important property and methods are:

 

    font - defines the font properties for text

    fillText(text,x,y) - Draws "filled" text on the canvas

    strokeText(text,x,y) - Draws text on the canvas (no fill)

 

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);

 

Gradients can be used to fill rectangles, circles, lines, text, etc. Shapes on the canvas are not limited to solid colors.

 

There are two different types of gradients:

 

    createLinearGradient(x,y,x1,y1) - Creates a linear gradient

    createRadialGradient(x,y,r,x1,y1,r1) - Creates a radial/circular gradient

 

Once we have a gradient object, we must add two or more color stops.

 

The addColorStop() method specifies the color stops, and its position along the gradient. Gradient positions can be anywhere between 0 to 1.

 

To use the gradient, set the fillStyle or strokeStyle property to the gradient, and then draw the shape, like a rectangle, text, or a line.

 

Javscript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

// Create gradient
var grd=ctx.createLinearGradient([i]0,0,200,0[/i]);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect([i]10,10,150,80[/i]);

 

Using createRadialGradient():

Javascript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

// Create gradient
var grd=ctx.createRadialGradient([i]75,50,5,90,60,100[/i]);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect([i]10,10,150,80[/i]);

 

 

Canvas - Images

 

To draw an image on a canvas, we will use the following method:

 

    drawImage(image,x,y)

Javascript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,[i]10,10[/i]);

(http://www.roadoutofdebt.com/wp-content/uploads/2011/11/the-scream.jpg)

 

Credits Olympus,Internet,ME.