<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
Drawing Lines
x: Horizontal coordinate from left edge
y: Vertical coordinate from Top
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);
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
Adding Shadow
FILL
Drawing Curves , Graphs , Grids on Canvas
Rotate , transform on Canvas
CODE Details
rotate() rotate canvas by any ( radian ) angle
transform() Scaling Moving and Skewing
translate() Shifting of origin of Cavas coordinates
Mouse Events on Canvas
Be the first to post comment:
More on HTML tags for fonts styles