Upcoming SlideShare
×

# Drawing on canvas

928 views
870 views

Published on

Published in: Technology, Education
0 Likes
Statistics
Notes
• Full Name
Comment goes here.

Are you sure you want to Yes No
• Be the first to comment

• Be the first to like this

Views
Total views
928
On SlideShare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
13
0
Likes
0
Embeds 0
No embeds

No notes for slide

### Drawing on canvas

1. 1. DRAWING ON CANVAS chapter 6
2. 2. Javascript + canvas    - Drawing a Logo    - Graphing Statistics with RGraph
3. 3.  The Canvas Element<canvas id="my_canvas" width="150" height="150">  Fallback content here </canvas>cant use css
4. 4.  var canvas = document.getElementById(my_canvas);if (canvas.getContext){    var context = canvas.getContext(2d);}else{}
5. 5. canvas_simple_drawing.htmlvar canvas = document.getElementById(my_canvas);  if (canvas.getContext){  var context = canvas.getContext(2d);   context.fillStyle = "rgb(200,0,0)";   context.fillRect (10, 10, 100, 100);   context.fillStyle = "rgb(0,0,200)";   context.fillRect (30, 30, 100, 100);   context.strokeStyle = "rgb(200,0,0)";   context.lineWidth = 2; context.beginPath(); context.moveTo(0, 0); context.lineTo(100, 100); context.stroke(); context.closePath();}........
6. 6. Drawing the logostring of text, an angeld path, a squeare, a triangleAdding Text    c o n t e x t . f o n t = i t a l i c 4 0 p x s a n s - s e r i f ;   c o n t e x t . t e x t B a s e l i n e = t o p ;   c o n t e x t . f i l l T e x t ( A w e s o m e C o , 6 0 , 0 ) ;
7. 7. Drawing the LogoDrawing lines    c o n t e x t . lineWidth=2;    c o n t e x t . beginPath();    c o n t e x t . moveTo(0,40);    c o n t e x t . lineTo(30,0);    c o n t e x t . lineTo(60,40);    c o n t e x t . lineTo(285,40);    c o n t e x t . stroke();    c o n t e x t . c l o s e P a t h ( )
8. 8. Drawing the LogoMoving the Origin    c o n t e x t . s a v e ( ) ;    c o n t e x t . t r a n s l a t e ( 2 0 , 2 0 ) ;    c o n t e x t . f i l l R e c t ( 0 , 0 , 2 0 , 2 0 ) ;
9. 9. Drawing the LogoDrawing a triangle    c o n t e x t . f i l l S t y l e = # f f f     c o n t e x t . s t r o k e S t y l e = # f f f ;    c o n t e x t . l i n e W i d t h = 2 ;    c o n t e x t . b e g i n P a t h ( ) ;    c o n t e x t . m o v e T o ( 0 , 2 0 ) ;    c o n t e x t . l i n e T o ( 1 0 , 0 ) ;    c o n t e x t . l i n e T o ( 2 0 , 2 0 ) ;    c o n t e x t . l i n e T o ( 0 , 2 0 ) ;    c o n t e x t . f i l l ( ) ;    c o n t e x t . c l o s e P a t h ( ) ;    c o n t e x t . r e s t o r e ( ) ;