To Create A Canvas

To create a canvas
<canvas id="ex1" width="500" height="150"

style="border: 1px solid #cccccc;">
HTML5 Canvas not supported
</canvas>
To Print Hello
<body>
<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
// do cool things with the context

context.font = '40pt Calibri';
context.fillStyle = 'red';
context.fillText('Hello World!', 150, 100);
</script>
</body>
To draw line
<script>
context.beginPath(); // it is optional
context.moveTo(100, 150);
context.lineTo(450, 50);
context.stroke(); //t o make line visible
</script>
context.lineWidth = 15; // to increase the width of line

context.strokeStyle = '#ff0000'; //to change the line color
We can use rgb(255,0,0) // line color will be red
Rgb(0,0,0)=black rgb(255,255,255) =white
context.lineCap = 'butt'; //
context.lineCap = 'round'; // round corner
context.lineCap = 'square';// square corner
By default Butt corners
Note: If this doent work put linecap property before stroke property
butt
Default. A flat edge is added to each end of the line
Play it
round
A rounded end cap is added to each end of the line
Play it
square
A square end cap is added to each end of the line
To draw any arc

<script>
var x = 200;
var y = 100;
var radius = 75;
var startAngle = 1.1 * 3.14;
var endAngle = 1.9 * 3.14;
var counterClockwise = true;

context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 15;
context.stroke();
</script>
To make a join line

<script>
// set line width for all lines

// miter line join (left)

context.lineJoin = 'miter';
context.stroke();
// round line join (middle)

context.lineJoin = 'round';
context.stroke();
// bevel line join (right)

context.lineJoin = 'bevel';
context.stroke();
</script>
To draw rectangle
<script>
context.rect(100, 50, 200, 50);
context.fillStyle = 'yellow';
context.fill();
context.strokeStyle = 'green';
context.stroke();
</script>
To Draw Circle
context.arc(x,y,r,sAngle,eAngle,counterclockwise);
In circle sangle is always 0 while eAngle is always 2*MATH.PI
context.arc(100,50, 50, 0, 2 * Math.PI);
context.fillStyle = 'green';
context.fill();
context.strokeStyle = '#003300';
context.stroke();
To Draw semicircle
context.arc(288, 75, 70, 0, Math.PI, false);
There are two types of gradients:

1.
Linear
2.
Radial
A linear gradient changes color with a linear pattern, either horizontally, vertically,
or diagonally.
A radial gradient change color with a circular pattern, changing color from the inside
and out.
Linear Gradients
As mentioned earlier, a linear gradient changes color using a linear pattern. A linear
gradient is created using the 2D Context function createLinearGradient(). Here is an
example:
varcanvas=document.getElementById("ex1");
varcontext=canvas.getContext("2d")
varx1=0;
vary1=0;
varx2=100;
vary2=0;
varlinearGradient1=context.createLinearGradient(x1,y1,x2,y2);
The createLinearGradient() function takes 4 parameters: x1, y1, x2, y2. These 4
parameters determine the direction and extension of the gradient pattern. The gradient
extends from the first point x1, y1 to the second point x2, y2.
A horizontal gradient is created by only varying the parameter values on the x-axis (for
x1 and x2), like this:
varx1=0;
vary1=0;
varx2=100;
vary2=0;
A vertical gradient is created by only varying the parameter values on the y-axis (for y1
and y2), like this:
varx1=0;
vary1=0;
varx2=0;
vary2=100;
varlinearGradient1=context.createLinearGradient(x1,y1,x2,y2);:
varx1=0;
vary1=0;
varx2=100;
vary2=100;
Color Stops
The examples above did not show what color the gradient was given. In order to set
the colors of a gradient you use the addColorStop() function on the gradient object.
Here is an example:
varlinearGradient1=context.createLinearGradient(0,0,100,0);
linearGradient1.addColorStop(0,'rgb(255,0,0)');
The addColorStop() function takes 2 parameters. The first parameter is a number

between 0 and 1. This number tells how far into the gradient area this color stop is
to be placed. The second parameter is the color itself. Notice how this example uses
the rbg(red, green, blue) notation for colors, where each red / green / blue value can
be a number between 0 and 255 (represented by 1 byte).
The above example adds two color stops. The first is the color red which is set to
start right from the beginning of the gradient (first parameter value is 0). The
second color is black which is set to be located at the end of the gradient area (first
parameter is 1).
You can add more than 2 color stops to a gradient. Here is an example that has 3
color stops:
linearGradient1.addColorStop(0.5,'rgb(0,0,255);
This examples adds the color blue which is located in the middle of the gradient.
The gradient will thus change smoothly from red, to blue, and then to black.
Example:
varcontext=canvas.getContext("2d");
linearGradient1.addColorStop(0.5,'rgb(0,0,255)');
context.fillStyle=linearGradient1;
context.fillRect(10,10,100,100);
linearGradient2.addColorStop(0.5,'rgb(0,0,255)');
context.strokeStyle=linearGradient2;
context.strokeRect(125,10,100,100);
A radial gradient is defined by 2 circles. Each circle has a center point and a radius.
Here is a code example:
varx1=100;//xof1.circlecenterpoint
vary1=100;//yof1.circlecenterpoint
varr1=30;//radiusof1.circle
varx2=100;//xof2.circlecenterpoint
vary2=100;//yof2.circlecenterpoint
varr2=100;//radiusof2.circle
varradialGradient1=
context.createRadialGradient(x1,y1,r1,x2,y2,r2);
radialGradient1.addColorStop(0,'rgb(0,0,255)');
radialGradient1.addColorStop(1,'rgb(0,255,0)');
context.fillStyle=radialGradient1;
Shadows
Negative values means that the shadow is drawn to the left of (x) and above (y) the shape.
varcontext=canvas.getContext("2d");
context.shadowOffsetX=10;
context.shadowOffsetY=10;
context.shadowBlur=4;
context.shadowColor="#666666";//orusergb(red,green,blue)
context.fillStyle="#000000";
context.fillStyle="#000066";
context.font="30pxArial";
context.fillText("HTML5CanvasShadow",10,120);

To Create A Canvas

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

To Create A Canvas

Uploaded by

Copyright:

Available Formats

To create a canvas

<canvas id="ex1" width="500" height="150"

// do cool things with the context

context.lineWidth = 15; // to increase the width of line

Default. A flat edge is added to each end of the line

A rounded end cap is added to each end of the line

A square end cap is added to each end of the line

To draw any arc

var counterClockwise = true;

To make a join line

// set line width for all lines

// miter line join (left)

// round line join (middle)

// bevel line join (right)

There are two types of gradients:

The addColorStop() function takes 2 parameters. The first parameter is a number

You might also like