<canvas> HTML Canvas tag

<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. 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

CODEDetails
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
textBaselineAlignment of text baseline

Drawing Lines

Line in Canvas x: Horizontal coordinate from left edge
y: Vertical coordinate from Top
CODEDetails
lineCapShape of endpoint of line
lineTo(x, y)Line from Previous point to new point
moveTo(x, y)Move to starting Point
lineWidthWidth of the line
lineJoinTypes of line Joints
miterLimitLimit of miter line join type
setLineDashDashed border line
lineDashOffsetOffset of dashed line
closePath()Returns to starting point.
strokeStyle()Colour , gradiant and pattern filling of Line
stroke()Draw line

Drawing Rectangles

Rectangle in Canvas x: Horizontal coordinate from left edge
y: Vertical coordinate from Top
Height: Height of the rectangle
Width: Widht of hte rectangle
CODEDetails
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
CODEDetails
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

CODEDetails
shadowColor = 'black';Colour of the shadow
shadowOffsetXOffset of Shadow horizontally
shadowOffsetYOffset of Shadow vertically
shadowBlur = 5;Level of the blurring effect

FILL

CODEDetails
fillStyleColour , gradiant and pattern filling of drawing
createLinearGradient()fillStyle : createLinearGradient
createRadialGradient()fillStyle : createRadialGradient

Drawing Curves , Graphs , Grids on Canvas

CODEDetails
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

CODEDetails
rotate()rotate canvas by any ( radian ) angle
transform()Scaling Moving and Skewing
translate()Shifting of origin of Cavas coordinates
CODEDetails
Mouse Click()X Y Coordinates of Mouse click


Subscribe

* indicates required
Subscribe to plus2net

    plus2net.com




    Post your comments , suggestion , error , requirements etc here .




    We use cookies to improve your browsing experience. . Learn more
    HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
    ©2000-2024 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer