Exploring Canvas    Kevin Hoyt    khoyt@adobe.com    Twitter, AIM,YIM: parkerkrhoyt    http://blog.kevinhoyt.com
Agenda  • Getting started  • Charting  • Drawing  • Interaction  • Painting  • Animation
Part #1:Getting Started
Using the Canvas Tag<canvas id="chart" width="150" height="150">    Current stock price: $3.15 +0.15</canvas><canvas id="c...
Rendering Contextvar canvas = document.getElementById( canvas );var context = null;if( canvas.getContext ){  context = can...
Coordinate Space      0  0                          X              y          x                          height           ...
Drawing Pathscontext.beginPath();context.arc( 75, 75, 50, 0, Math.PI * 2, true );context.moveTo( 110, 75 );context.arc( 75...
Understanding Lines(0, 0)                    (0, 0)                 (3, 1)                (3.5, 1)                 (3, 5) ...
Caps, Joints and Miters   butt   round    width / 2  round   bevel      x limit square   miter   from joint
Styles and Colors         fillStyle        strokeStyle            orange           #FFA500     rgb( 255, 165, 0 )   rgba( ...
Gradients// Start point and stop point// Controls angle/direction of gradientvar fill = context.createLinearGradient( 0, 0...
Gradients// Inner circle point and radius// Outer circle point and radius// Not necessarily a single pointvar fill = conte...
Text and Shadowsvar canvas = document.getElementById( canvas );var ctx = null;if( canvas.getContext ){    ctx = canvas.get...
Shapes
Part #2:Charting
PlotKit
jqPlot
RGraph
Part #3:Drawing
Follow the Mouse
Saving
Saving with Flair
Looking Ahead
Part #4:Interaction
Tracking Points    What’s clickable?   How do you know?   Canvas vs DOM...
CurvesQuadratic Curve            Cubic Curve
Part #5:Painting
Load From Server
Load From Servervar canvas = document.getElementById( canvas );var ctx = canvas.getContext( 2d );var img = null;$( #make )...
Load From Server
Other Canvas
Other Canvasvar canvas = document.getElementById( lines );var ctx = canvas.getContext( 2d );ctx.beginPath();ctx.moveTo( 30...
Other Canvas
Embedded Data
Embedded Datavar canvas = document.getElementById( canvas );var ctx = canvas.getContext( 2d );var img = null;$( #embed ).c...
Pixel Pushing        context.drawImage(            myImg,            frame.x,            frame.y,            frame.width, ...
Pixel Slicing        context.drawImage(            myImg,            frame.x,            frame.y,            frame.width, ...
Pixel Dissecting
Part #6:Animation
Update on Interval
TweeningJSTweener.addTween( position, {    time: 3,    transition: easeOutExpo,    x: end.x,    y: end.y,    onUpdate: fun...
Line Interpolation
Physics Box2D JS
Questions?  Kevin Hoyt  khoyt@adobe.com  Twitter, AIM,YIM: parkerkrhoyt  http://blog.kevinhoyt.com
Upcoming SlideShare
Loading in …5
×

Exploring Canvas

2,009
-1

Published on

This presentation introduces developers to the functionality of the HTML5 canvas tag. It runs from getting started (slow start) to more comprehensive examples designed to be inspirational in nature. This presentation is not designed to make you an expert with canvas, but to introduce developers to the wealth of possibilities.

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,009
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
55
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Exploring Canvas

    1. 1. Exploring Canvas Kevin Hoyt khoyt@adobe.com Twitter, AIM,YIM: parkerkrhoyt http://blog.kevinhoyt.com
    2. 2. Agenda • Getting started • Charting • Drawing • Interaction • Painting • Animation
    3. 3. Part #1:Getting Started
    4. 4. Using the Canvas Tag<canvas id="chart" width="150" height="150"> Current stock price: $3.15 +0.15</canvas><canvas id="clock" width="150" height="150"> <img src="imagesclock.png" width="150" height="150"/></canvas>
    5. 5. Rendering Contextvar canvas = document.getElementById( canvas );var context = null;if( canvas.getContext ){ context = canvas.getContext( 2d ); // Drawing code here} else { // Unsupported code here}
    6. 6. Coordinate Space 0 0 X y x height width Y
    7. 7. Drawing Pathscontext.beginPath();context.arc( 75, 75, 50, 0, Math.PI * 2, true );context.moveTo( 110, 75 );context.arc( 75, 75, 35, 0, Math.PI, false );context.moveTo( 65, 65 );context.arc( 60, 65, 5, 0, Math.PI * 2, true );context.moveTo( 95, 65 );context.arc( 90, 65, 5, 0, Math.PI * 2, true );// context.closePath();context.stroke();// context.fill();
    8. 8. Understanding Lines(0, 0) (0, 0) (3, 1) (3.5, 1) (3, 5) (3.5, 5) 1.0 width 1.0 width
    9. 9. Caps, Joints and Miters butt round width / 2 round bevel x limit square miter from joint
    10. 10. Styles and Colors fillStyle strokeStyle orange #FFA500 rgb( 255, 165, 0 ) rgba( 255, 165, 0, 1 )
    11. 11. Gradients// Start point and stop point// Controls angle/direction of gradientvar fill = context.createLinearGradient( 0, 0, 0, 50 );// 0 - 1 relative to gradient rangefill.addColorStop( 0, ‘#FFFFFF’ );fill.addColorStop( 0.5, ‘#FFA500’ );fill.addColorStop( 1, ‘#FFFFFF’ );// Apply the fill stylecontext.fillStyle = fill;context.fillRect( 0, 0, 50, 50 );
    12. 12. Gradients// Inner circle point and radius// Outer circle point and radius// Not necessarily a single pointvar fill = context.createRadialGradient( 95, 15, 15, 102, 20, 40);// 0 - 1 relative to gradient rangefill.addColorStop( 0, ‘#FFFFFF’ );fill.addColorStop( 0.5, ‘#FFA500’ );fill.addColorStop( 1, ‘#FFFFFF’ );// Apply the fill stylecontext.fillStyle = fill;context.fillRect( 0, 0, 50, 50 );
    13. 13. Text and Shadowsvar canvas = document.getElementById( canvas );var ctx = null;if( canvas.getContext ){ ctx = canvas.getContext( 2d ); ctx.shadowOffsetX = 2; ctx.shadowOffsetY = 2; ctx.shadowBlur = 2; ctx.shadowColor = rgba( 0, 0, 0, 0.5 ); ctx.font = 20px Times New Roman; ctx.fillStyle = black; ctx.fillText( Sample String, 5, 30 );}
    14. 14. Shapes
    15. 15. Part #2:Charting
    16. 16. PlotKit
    17. 17. jqPlot
    18. 18. RGraph
    19. 19. Part #3:Drawing
    20. 20. Follow the Mouse
    21. 21. Saving
    22. 22. Saving with Flair
    23. 23. Looking Ahead
    24. 24. Part #4:Interaction
    25. 25. Tracking Points What’s clickable? How do you know? Canvas vs DOM...
    26. 26. CurvesQuadratic Curve Cubic Curve
    27. 27. Part #5:Painting
    28. 28. Load From Server
    29. 29. Load From Servervar canvas = document.getElementById( canvas );var ctx = canvas.getContext( 2d );var img = null;$( #make ).click( function( evt ) { img = new Image(); img.onload = function() { ctx.drawImage( img, 0, 0 ); }; img.src = images/backdrop.png;} );
    30. 30. Load From Server
    31. 31. Other Canvas
    32. 32. Other Canvasvar canvas = document.getElementById( lines );var ctx = canvas.getContext( 2d );ctx.beginPath();ctx.moveTo( 30, 96 );ctx.lineTo( 70, 66 );ctx.lineTo( 103, 76 );ctx.lineTo( 170, 15 );ctx.stroke();canvas = document.getElementById( canvas );ctx = canvas.getContext( 2d );$( #lines ).click( function( evt ) { ctx.drawImage( this, 0, 0 );} );
    33. 33. Other Canvas
    34. 34. Embedded Data
    35. 35. Embedded Datavar canvas = document.getElementById( canvas );var ctx = canvas.getContext( 2d );var img = null;$( #embed ).click( function( evt ) { img = new Image(); img.src = data:image/png;base64,iVB...; ctx.drawImage( img, 0, 0 );} );
    36. 36. Pixel Pushing context.drawImage( myImg, frame.x, frame.y, frame.width, frame.height );
    37. 37. Pixel Slicing context.drawImage( myImg, frame.x, frame.y, frame.width, frame.height, 22, 21, frame.width, frame.height );
    38. 38. Pixel Dissecting
    39. 39. Part #6:Animation
    40. 40. Update on Interval
    41. 41. TweeningJSTweener.addTween( position, { time: 3, transition: easeOutExpo, x: end.x, y: end.y, onUpdate: function() { context.clearRect( 0, 0, 640, 480 ); // Draw updates to sprites }, onComplete: function() { position = null; start = null; end = null; }} );
    42. 42. Line Interpolation
    43. 43. Physics Box2D JS
    44. 44. Questions? Kevin Hoyt khoyt@adobe.com Twitter, AIM,YIM: parkerkrhoyt http://blog.kevinhoyt.com

    ×