canvas tag by abhishek parolkar
DESCRIPTION
A presentation on canvas tagTRANSCRIPT
Who am I?
Scope of this talk
{ W3C
WHATWG Web2.0
<canvas>What? , Why? , How?//your comments/*my opinions*/./demos
</canvas><canvas> Vs All enemies (Adobe Flash/ Flex, Java Applets,
Silverlight...) };
W3C == WWWC == World Wide Web Consortium
The big brother who gave us “HTML” specification so that we all (web browsers) talk in same manner.
HTML 4 – A stable specification.
DOM Level 2/3
XML*
XHTML
XForms
WHATWG Web Hypertext Application Technology Working Group
“In 2004, after a W3C workshop, Apple, Mozilla and Opera were becoming increasingly concerned about the W3C™s direction with XHTML, lack of interest in HTML and apparent disregard for the needs of realworld authors. So, in response, these organisations set out to with a mission to address these concerns and the Web Hypertext Application Technology Working Group was born.”
HTML 5 (Not a complete specification yet )
The story begins!
...When there was hardly any meaning for “Interactive Media”...
...and internet bandwidth was subject of luxury...
...HTML was just “Hyper Text Markup Language”
we browsers were helpless creatures...
..then came JAVA (HOT JAVA) , FLASH.
and ECMA Script (JavaScript)
..and DHTML heaven
...a powerful Document Object Model Interface
Dynamic content at clientside became reality...
Websites evolved to be interactive sites / multimedia websites
But....
Limitations
Content was mostly plugin based. Non Standard protocols for communication Programmers became “Web Developers” ...then came many other mark up languages for each purpose People were just playing with workarounds , No clearly thought out solution for serving interactive content.
Web developers could never enjoy freedom that desktop IU hackers have
Desktop UI Hacker Web UI Hacker
I am a creative designer
I build new UI controlsI draw directly on graphicsbuffer at pixel levels
u know, Its so much funwhen I can manage and optimise my graphics hardware capabilities
I have choice of libraries
My app works fine every where
Me too, I like UI hacking
Oh Wow!, I do it by writing java applet/flash app.
Hmmm.....
:) hmmmmmm...
I tell my users to install/update pllugin , it works fine for them
Introducing <Canvas> Tag
<canvas id="tutorial" width="150" height="150">Its funny! , your browser doesnt support canvas yet.
</canvas>
<canvas id="stockGraph" width="150" height="150"> current stock price: $3.15 +0.15</canvas>
<canvas id="clock" width="150" height="150"> <img src="images/clock.png" width="150" height="150"/></canvas>
getContext Thats all you need to take control
var canvas = document.getElementById('canvas');var ctx = canvas.getContext('2d');
Document structure<html> <head> <title>Canvas tutorial</title> <script type="text/javascript"> function draw(){ var canvas = document.getElementById('mycanvas'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); } } </script> <style type="text/css"> canvas { border: 1px solid black; } </style> </head> <body onload="draw();"> <canvas id="mycanvas" width="150" height="150"></canvas> </body></html>
Basics:
The grid:top left corner (coordinate (0,0)) Unlike SVG, canvas only supports one primitive shape rectangles.
fillRect(x,y,width,height) : Draws a filled rectanglestrokeRect(x,y,width,height) : Draws a rectangular outlineclearRect(x,y,width,height) : Clears the specified area and makes it fully transparent
Free Hand Drawing
ctx.beginPath();ctx.moveTo(75,50);ctx.lineTo(100,75);ctx.lineTo(100,25);ctx.fill();
arc(x, y, radius, startAngle, endAngle, anticlockwise)bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
Drawing/ Scaling /Import Graphics
drawImage(image, x, y, width, height);drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
... Coloring my world ...ctx.fillStyle = "orange";ctx.fillStyle = "#FFA500";ctx.fillStyle = "rgb(255,165,0)";ctx.fillStyle = "rgba(255,165,0,1)";
...Transparency...globalAlpha = transparency value
...Gradients...createLinearGradient(x1,y1,x2,y2)createRadialGradient(x1,y1,r1,x2,y2,r2)
...Pattern...createPattern(image,type)
Saving and restoring state
save()restore()
Transformationstranslate(x, y)rotate(angle)scale(x, y)
CompositingglobalCompositeOperation = type[sourceover (default),sourcein,sourceout,sourceatop,lighter,copy,xor,darker]
clip()
AnimationSteps: 1. Clear the canvas 2. Save the canvas state 3. Draw animated shapes 4. Restore the canvas state 5. Repeat
</canvas>
Thank You
