Exploring Canvas

2,191 views

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,191
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
56
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

    ×