Canvas html <canvas> tag to draw lines or graphics or animation in web page

<canvas id="my_canvas" width="500" height="200"></canvas>

We can draw graphics , animation, lines ,circles etc on the canvas. We can use JavaScript or JQuery to add graphics to a canvas.

Basics

Adding Text
Drawing Lines
Drawing Rectangles
Drawing Arc, Circles
Adding Shadow
Fill
Drawing Curves ( sin, cos )
Mouse Events

DEMO

Canvas with border

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

To access the Canvas element we will first try to JavaScript

var my_canvas = document.getElementById('my_canvas');
var gctx = my_canvas.getContext('2d');

By Jquery

var my_canvas=$('#my_canvas').get(0)
var gctx = my_canvas.getContext("2d");

Adding Text

CODE	Details
font='28px Verdana';	Font family , size
fillStyle='#00FF00';	Colour to Fill the Text
fillText('text',x, y)	Add Text at X , Y position
strokeText('text',10,10)	Add Text ( No fill ) as X, Y position
textAlign='Left'	Align text to left , right etc
textBaseline	Alignment of text baseline

Drawing Lines

x: Horizontal coordinate from left edge
y: Vertical coordinate from Top

CODE	Details
lineCap	Shape of endpoint of line
lineTo(x, y)	Line from Previous point to new point
moveTo(x, y)	Move to starting Point
lineWidth	Width of the line
lineJoin	Types of line Joints
miterLimit	Limit of miter line join type
setLineDash	Dashed border line
lineDashOffset	Offset of dashed line
closePath()	Returns to starting point.
strokeStyle()	Colour , gradiant and pattern filling of Line
stroke()	Draw line

Drawing Rectangles

x: Horizontal coordinate from left edge
y: Vertical coordinate from Top
Height: Height of the rectangle
Width: Widht of hte rectangle

CODE	Details
rect(x, y, width, height)	Create rectangle, visible after stroke()
fillRect(x, y, width, height)	Draw & Fill Rectangle
strokeRect(x, y, width, height)	Draw Outline of Rectangle
clearRect(x, y, width, height)	Clear Rectangle & make it transparent

Drawing Arc or Circle

gctx.arc(x, y, r, startAngle, endAngle, anticlockwise); Arc & Circle in Canvas

x: Horizontal coordinate from left edge
y: Vertical coordinate from Top
r : Radius of Arc or Circle
startAngle: Staring angle
endAngle: Ending angle
anticlockwise : (optional) Boolean. True for anticlockwise , False for clockwise direction of arc

CODE	Details
arc(x, y,r,ang1,ang2)	Create arc , circle angles
quadraticCurveTo()	quadratic Bezier curve
bezierCurveTo()	Bezier curve with two control points
arcTo()	Drawing curvs using control points

Adding Shadow

CODE	Details
shadowColor = 'black';	Colour of the shadow
shadowOffsetX	Offset of Shadow horizontally
shadowOffsetY	Offset of Shadow vertically
shadowBlur = 5;	Level of the blurring effect

FILL

CODE	Details
fillStyle	Colour , gradiant and pattern filling of drawing
createLinearGradient()	fillStyle : createLinearGradient
createRadialGradient()	fillStyle : createRadialGradient

Drawing Curves , Graphs , Grids on Canvas

CODE	Details
sin()	Simple Sine curve
sin()	sine curve in slow motion
cos()	cos() curve
sin() & cos()	Both curves with grid and shadow effect
sin() & cos()	Both curves in slow motion

Rotate , transform on Canvas

Mouse Events on Canvas

CODE	Details
rotate()	rotate canvas by any ( radian ) angle
transform()	Scaling Moving and Skewing
translate()	Shifting of origin of Cavas coordinates

CODE	Details
Mouse Click()	X Y Coordinates of Mouse click

<canvas> HTML Canvas tag