Your SlideShare is downloading. ×
04 html5 graphics
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

04 html5 graphics


Published on

Published in: Technology, Education
  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. HTML5 GraphicsDrawing shapes with the <canvas> tag
  • 2. Graphics were always limited toexternal images—  jpgs, gifs, pngs<img src="VaderAttacks.jpg" />!—  Therewas no way to create dynamic or original graphics in HTML
  • 3. But HTML5 introduced the <canvas> allows —  Canvas st about draw ing ju anything cv" s id=" < canva 00" wid th="1 0" />! 0 heig ht="1
  • 4. The canvas is laid out with coordinates—  The origin is in the upper-left—  Units are pixels
  • 5. We need some JavaScript to draw onthe canvasfunction drawOnCanvas() {! var canvas = document.getElementById("cv");! var ctx = canvas.getContext("2d");! ctx.fillRect(50, 25, 150, 100);!}!
  • 6. fillRect(x, y, width, height) draws arectangle —  It uses the current fill style
  • 7. fillStyle andstrokeStyletells us whatkind of paintwere usingwhen wedraw—  CSS color—  A pattern—  A gradient
  • 8. strokeRect(x, y, width, height) draws arectangle with the current stroke style—  fillRect draws it and fills it. strokeRect only draws the lines
  • 9. clearRect(x, y,width, height)un-draws the pixels in the specified rectangle.
  • 10. Hands-on drawing rectangles
  • 11. You can erase the canvas by setting itswidth or height—  You don’t even need to change the width var cv = document.getElementById("cv");!cv.width = cv.width; !
  • 12. Hands-on clearing the canvas
  • 13. We draw paths with moveTo(), lineTo()and stroke()—  Merely moves the penctx.moveTo(100, 10);!—  Draws a linectx.lineTo(200, 10);!ctx.lineTo(200, 110);!
  • 14. But nothing actuallygets drawn until youtell it to with stroke() ctx.stroke();!
  • 15. Demo:Hands-onlines Drawing drawing lines
  • 16. You can draw curves with arc()—  An arc is a portion of a circle—  This is how well draw ◦  circles ◦  arc segments
  • 17. Arc isnt easy to work witharc(x, y, radius, startAngle, endAngle, direction);—  Where: ◦  x, y: the center of the circle ◦  startAngle, endAngle: The angle in radians that the arc starts and ends. 0=straight left ◦  direction: true=counterclockwise & false=clockwise—  Example: circlectx.arc(x, y, radius, 0, Math.PI * 2, true); !
  • 18. Demo: Hands-onarcs Drawing drawing arcs
  • 19. There are some other ways to drawcurves—  ctx.quadraticCurveTo(cpx,cpy,x,y);—  ctx.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);—  ctx.arcTo(x1,y1,x2,y2,radius);
  • 20. We add text to our drawings withfillText()—  context.fillText(textstring, x, y);context.font = "bold 12px arial";!context.fillText("Liz", 200, 40);!context.fillText("Lemon", 200, 60);!
  • 21. CSS styling is not available to the text on canvases—  We can set a font, color and size—  But we cannot do it with styles—  No: ◦  padding ◦  margins ◦  wrapping
  • 22. Font can be anything you would put in aCSS font rule—  font style—  font variant—  font weight—  font size—  line height—  font family
  • 23. Demo: Adding text text to drawings Hands-on adding to drawings
  • 24. Gradients can add realism to drawingsvar grad = !context.createLinearGradient(0,0,30,25);!grad.addColorStop(0, #0f0);!grad.addColorStop(1, #e49);!context.fillStyle = grad;!context.fillRect(0, 0, 300, 225);!
  • 25. Hands-on gradients
  • 26. Sometimes,though, wejust need toput animage inour canvas
  • 27. drawImage() allows us to include anexisting jpg, gif, or png—  Get the drawing firstvar vader = new Image();!vader.src = "images/vaderAttacks.jpg";!—  Draw image starting at (x, y)ctx.drawImage(vader, x, y);!—  Draw image starting at (x, y) and scale it to (w, h)drawImage(vader, x, y, w, h);!
  • 28. Demo: Adding images toimagescanvas Hands-on adding your
  • 29. Conclusion—  HTML5 canvas suddenly makes it possible to create drawings, games and other RIA without Flash, Silverlight or other plug-ins—  The low-level access to the canvass context allows you to draw just about anything—  We can include text and images in addition to rectangles, lines, and arcs