A blank slate to draw graphs, game graphics, video, or
other visual images on the fly.”
• 2D drawing tool within all modern browsers
• No downloads (plugins) required!
• Openly developed by the WC3 (WWW consort...
Introduced by Apple, as
part of WebKit in 2004, to
show the power of
desktop apps within their
Safari browser.
Now a stand...
<canvas id=“myCanvas" width="150" height="150"></canvas>
• Only 2 attributes: Width & Height
• Default values for width an...
Older browsers may not support the <canvas>
element
Therefore, we insert fallback text, just in case it won’t
display
<can...
var canvas = document.getElementById('tutorial');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
// drawing co...
The canvas is a two-dimensional grid.
The coordinate (0, 0) is at the upper-
left corner of the canvas.
Along the X-axis, ...
var canvas = document.getElementById(‘myCanvas');
var ctx = canvas.getContext('2d');
var canvas = document.getElementById(“myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillRect(50, 25, 150, 100);
Param...
•fillStyle: can be a CSS color, a pattern, or a gradient. (Default color is black)
•strokeStyle: like fillStyle, but used ...
<canvas id="myCanvas" width=“300" height="150"></canvas>
var canvas = document.getElementById("myCanvas");
var ctx = canva...
<canvas id="myCanvas" width=200 height=120></canvas>
var canvas = document.getElementById('myCanvas');
var ctxt = canvas.g...
• Scale(): Scales the current drawing, bigger or smaller
• Rotate(): Rotates current drawing
• Translate(): Moves the (0,0...
<canvas id="myCanvas" width="300" height="200"></canvas>
var canvas = document.getElementById("myCanvas");
var ctx = canva...
<canvas id="myCanvas" width=“300" height=“300"></canvas>
var canvas = document.getElementById("myCanvas");
var ctx = canva...
http://www.w3schools.com/tags/playcanvas.asp?filename=playcanvas_transformb&preval=1,0,0,1,0,0
A – Scales the drawing hori...
<canvas id="myCanvas" width=“300" height=“300"></canvas>
var canvas = document.getElementById("myCanvas");
var ctx = canva...
Three steps are required:
1. Begin the path – beginPath()
2. Move the points – moveTo() or lineTo()
3. Stroke (outline) / ...
Moves the “pencil” to the x, y coordinates
Doesn’t draw anything, but becomes part of the path
Think of it as lifting a pe...
Drags the “pencil” to the x, y coordinates
var canvas = document.getElementById(‘myCanvas');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
ctx.beginPath...
Unlike text on a webpage, there is no box model, so CSS layout
techniques are not available, such as:
- float, margin, pad...
<canvas id=“myCanvas" width=“150” height=“100”></canvas>
var canvas = document.getElementById ('myCanvas'); // access the ...
var canvas =document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var grd = ctx.createLinearGradient(0,0...
CSS Gradients
Canvas gradients aren’t widely used
Instead, most developers prefer
#grad
{
background: -webkit-linear-gradient(left, white, black); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradien...
Impact.js
Turbulenz
Paper.js
Canvas.js
Processing.js
EaselJS
HTML5 Canvas Tutorials
Link to HTML5 cheat sheet
Advanced html5 diving into the canvas tag
Advanced html5 diving into the canvas tag
Advanced html5 diving into the canvas tag
Advanced html5 diving into the canvas tag
Advanced html5 diving into the canvas tag
Advanced html5 diving into the canvas tag
Advanced html5 diving into the canvas tag
Advanced html5 diving into the canvas tag
Advanced html5 diving into the canvas tag
Advanced html5 diving into the canvas tag
Advanced html5 diving into the canvas tag
Advanced html5 diving into the canvas tag
Advanced html5 diving into the canvas tag
Advanced html5 diving into the canvas tag
Advanced html5 diving into the canvas tag
Advanced html5 diving into the canvas tag
Advanced html5 diving into the canvas tag
Advanced html5 diving into the canvas tag
Advanced html5 diving into the canvas tag
Advanced html5 diving into the canvas tag
Advanced html5 diving into the canvas tag
Advanced html5 diving into the canvas tag
Advanced html5 diving into the canvas tag
Advanced html5 diving into the canvas tag
Upcoming SlideShare
Loading in …5
×

Advanced html5 diving into the canvas tag

854 views

Published on

Dive into the HTML5 canvas tag and learn how it works in the 2D context

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
854
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
14
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • You can have more than one <canvas> element on the same page. Each canvas will show up in the DOM, and each canvas maintains its own state. If you give each canvas an id attribute, you can access them just like any other element.
  • Scripts can also check for support programatically by simply testing for the presence of the getContext() method.
  • Default color is black
  • The first line retrieves the DOM node for the <canvas> element by calling the document.getElementById() method. Once you have the element node, you can access the drawing context using its getContext() method.
  • Visual Studio https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Basic_usage
  • Default color is black
    http://jsfiddle.net/
  • Default color is black
  • http://jsfiddle.net/
  • Advanced html5 diving into the canvas tag

    1. 1. A blank slate to draw graphs, game graphics, video, or other visual images on the fly.”
    2. 2. • 2D drawing tool within all modern browsers • No downloads (plugins) required! • Openly developed by the WC3 (WWW consortium)
    3. 3. Introduced by Apple, as part of WebKit in 2004, to show the power of desktop apps within their Safari browser. Now a standard!
    4. 4. <canvas id=“myCanvas" width="150" height="150"></canvas> • Only 2 attributes: Width & Height • Default values for width and height: 300px x 150px
    5. 5. Older browsers may not support the <canvas> element Therefore, we insert fallback text, just in case it won’t display <canvas id=“myChart" width="150" height="150"> Current version of IE: 11 </canvas>
    6. 6. var canvas = document.getElementById('tutorial'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); // drawing code here } else { // canvas-unsupported code here: Hey, you need to update your browser! }
    7. 7. The canvas is a two-dimensional grid. The coordinate (0, 0) is at the upper- left corner of the canvas. Along the X-axis, values increase from left to right. Along the Y-axis, values increase from top to bottom.
    8. 8. var canvas = document.getElementById(‘myCanvas'); var ctx = canvas.getContext('2d');
    9. 9. var canvas = document.getElementById(“myCanvas"); var ctx = canvas.getContext("2d"); ctx.fillRect(50, 25, 150, 100); Parameters: X: The x-coordinate of the upper-left corner of the rectangle Y The y-coordinate of the upper-left corner of the rectangle Width: The width of the rectangle, in pixels Height: The height of the rectangle, in pixels
    10. 10. •fillStyle: can be a CSS color, a pattern, or a gradient. (Default color is black) •strokeStyle: like fillStyle, but used for lines •fillRect( x, y, width, height) draws a rectangle filled with the current fill style. •strokeRect(x, y, width, height) draws an rectangle w/ current stroke style. Only draws edges. •clearRect( x, y, width, height) clears the pixels in the specified rectangle.
    11. 11. <canvas id="myCanvas" width=“300" height="150"></canvas> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.fillStyle = "red"; ctx.fillRect (0, 0, 300, 150); ctx.clearRect(20, 20, 100, 50);
    12. 12. <canvas id="myCanvas" width=200 height=120></canvas> var canvas = document.getElementById('myCanvas'); var ctxt = canvas.getContext('2d'); ctx.fillStyle = '#000000'; // set color to black ctx.fillRect(0, 0, 200, 40); // draw (200x40 pixel) rectangle at (0,0 ctx.fillStyle = '#FF0000'; // set color to red ctx.fillRect(0, 40, 200, 40); // draw (200x40 pixel) rectangle at (0,40) ctx.fillStyle = '#FFCC00'; // set color to gold ctx.fillRect(0, 80, 200, 40); // draw (200x40 pixel) rectangle at (0,80)
    13. 13. • Scale(): Scales the current drawing, bigger or smaller • Rotate(): Rotates current drawing • Translate(): Moves the (0,0) position on the canvas • Transform(): Replaces current transform matrix for current drawing • setTransform(): Resets current transform matrix to the identity matrix, then runs transform()
    14. 14. <canvas id="myCanvas" width="300" height="200"></canvas> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.rotate(20 * Math.PI / 180); ctx.fillRect(50, 20, 100, 50); Save & Restore context Save & Restore context (cont’d) To calculate from degrees to radians: degrees * Math.PI/180
    15. 15. <canvas id="myCanvas" width=“300" height=“300"></canvas> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.strokeRect(5, 5, 100, 30); // draw first rectangle ctx.scale(2,2); // 2x width, 2x height ctx.strokeRect(5, 5, 100, 30); // draw second triangle
    16. 16. http://www.w3schools.com/tags/playcanvas.asp?filename=playcanvas_transformb&preval=1,0,0,1,0,0 A – Scales the drawing horizontally B – Skew the drawing horizontally C- Skew the drawing vertically D - Scale the drawing vertically E – Moves the drawing horizontally F – Moves the drawing vertically
    17. 17. <canvas id="myCanvas" width=“300" height=“300"></canvas> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.fillRect (10, 10, 100, 50); ctx.translate(70, 70); ctx.fillRect (10, 10, 100, 50);
    18. 18. Three steps are required: 1. Begin the path – beginPath() 2. Move the points – moveTo() or lineTo() 3. Stroke (outline) / Fill the path – stroke() or fill() 4. *Close the path – closePath() *Note: When you call fill(), any open shapes are closed automatically, so you don’t need to call closePath(). This is not true when you use stroke(), though.
    19. 19. Moves the “pencil” to the x, y coordinates Doesn’t draw anything, but becomes part of the path Think of it as lifting a pencil, then places it at this spot
    20. 20. Drags the “pencil” to the x, y coordinates
    21. 21. var canvas = document.getElementById(‘myCanvas'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); ctx.beginPath(); // starts drawing ctx.moveTo(75,50); // First point (left) ctx.lineTo(100,75); // Bottom point ctx.lineTo(100,25); // Top point ctx.fill(); // black is default }
    22. 22. Unlike text on a webpage, there is no box model, so CSS layout techniques are not available, such as: - float, margin, padding, word wrap Available attributes: • font (style, font variant, weight, size, line height, family) • textAlign (start, end, left, right, center) • TextBaseline (top, hanging, middle, alphabetic, ideographic, bottom)
    23. 23. <canvas id=“myCanvas" width=“150” height=“100”></canvas> var canvas = document.getElementById ('myCanvas'); // access the canvas object var ctx = canvas.getContext ('2d'); // access the canvas context ctx.fillRect (5,5,140,50); // fill rectangle with black color ctx.fillStyle = 'red'; // set text color to 'red' ctx.font = '40pt Arial'; // define the CSS font for writing text ctx.fillText ('Text',1 0,50); // write the text 'Text‘
    24. 24. var canvas =document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); var grd = ctx.createLinearGradient(0,0,170,0); grd.addColorStop(0,"black"); grd.addColorStop(1,"white"); ctx.fillStyle=grd; ctx.fillRect(0,0,150,100); Smooth transition between two colors
    25. 25. CSS Gradients Canvas gradients aren’t widely used Instead, most developers prefer
    26. 26. #grad { background: -webkit-linear-gradient(left, white, black); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(right, white, black); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(right white, black); /* For Firefox 3.6 to 15 */ background: linear-gradient(to right, white, black); /* Standard syntax */ }
    27. 27. Impact.js Turbulenz Paper.js Canvas.js Processing.js EaselJS HTML5 Canvas Tutorials
    28. 28. Link to HTML5 cheat sheet

    ×