1 / 101

HTML5 Canvas API

HTML5 Canvas API. Dr. Raymond Bond. API Definition: “a bitmapped area of the screen that can be manipulated with JavaScript ”. Oreilly , HTML5 Canvas. Element Definition: “The HTML5 <canvas> element is used to draw graphics, on the fly, via scripting (usually JavaScript) .”.

tucker
Download Presentation

HTML5 Canvas API

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML5 Canvas API Dr. Raymond Bond

  2. API Definition: “a bitmapped area of the screen that can be manipulated with JavaScript” Oreilly, HTML5 Canvas

  3. Element Definition: “The HTML5 <canvas> element is used to draw graphics, on the fly, via scripting (usually JavaScript).” http://www.w3schools.com/html/html5_canvas.asp

  4. “HTML5 Canvas is the technology that has the best capability of replacing Flash functionality on the web and mobile web.” Oreilly, HTML5 Canvas

  5. Support

  6. Canvas Applications • http://atari.com/arcade#!/arcade/atari-promo • http://www.createjs.com/#!/EaselJS/demos • http://mudcu.be/sketchpad/ • http://raphaeljs.com/ • http://alteredqualia.com/canvasmol/ • http://thewildernessdowntown.com/

  7. Testing for Support <scriptsrc="http://modernizr.com/downloads/modernizr-latest.js"></script> if(Modernizr.canvas == true){ startCanvasApp(); }else{ //browser does not support canvas }

  8. Canvas Element <canvas id="myCanvas" width="200" height="100"> </canvas> NOTE: Need id for script access.

  9. Canvas Element • The <canvas> element is only a container for the graphics. • A canvas can only be rectangular • You can have multiple <canvas> elements on one HTML page • By default, the <canvas> element has no border and no content.

  10. Adding a Border <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"> </canvas>

  11. Inline Canvas Scripting <body> <canvas id="myCanvas" width="200" height="100” > Your browser does not support the HTML5 canvas tag. </canvas> <script> var c = document.getElementById("myCanvas"); varctx = c.getContext("2d");ctx.fillStyle = "#FF0000"; ctx.fillRect(0,0,150,75); </script> </body> Returns the CanvasRenderingContext2D object

  12. Or use the onload event <head> <script> function onload(){ varc=document.getElementById("myCanvas"); varctx=c.getContext("2d"); ctx.fillStyle="#FF0000"; ctx.fillRect(0,0,150,75); } </script> </head> <body onLoad="onload()"> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">Your browser does not support the HTML5 canvas tag.</canvas> </body>

  13. Or link to external JS file <head> <script type="text/javascript" src="canvasapp.js"></script> </head> <body onLoad="onload()"> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">Your browser does not support the HTML5 canvas tag.</canvas> </body> NOTE: In HTML5, you no longer have to specify the script type attribute. Do we need this?

  14. No!! window.onload = function(){ canvasApp(); } function canvasApp(){ varc=document.getElementById("myCanvas"); varctx=c.getContext("2d"); ctx.fillStyle="#FF0000"; ctx.fillRect(0,0,150,75); }

  15. AddEventListener window.addEventListener("load", canvasApp, false); function canvasApp(){ varc=document.getElementById("myCanvas"); varctx=c.getContext("2d"); ctx.fillStyle="#FF0000"; ctx.fillRect(0,0,150,75); }

  16. Jqueryonload event $(function() { // insert code });

  17. Canvas Coordinate system

  18. What makes canvas different from other graphics technologies such as Adobe Flash?

  19. Immediate mode “Canvas is an immediate mode bitmapped area of the screen... Immediate mode refers to the way the canvas renders pixels… Canvas completely redraws the bitmapped screen on every frame...” “which means everything needs to be redrawn every time something changes.”

  20. Retained mode “This makes Canvas very different from Flash, Silverlight, or SVG, which operate in retained mode. In this mode, a display list of objects is kept by the graphics renderer…” Oreilly, HTML5 Canvas

  21. Pros and cons Immediate mode: low level operations more control Responsive mode: high level operations less control

  22. - W3C Schools

  23. Text on the Canvas var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.font = "30px Arial"; ctx.fillText("Hello World", 10, 50);

  24. Text on the Canvas var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.font="30px Arial"; ctx.strokeText("Hello World",10,50);

  25. Drawing functions var c=document.getElementById("myCanvas"); varctx=c.getContext("2d"); ctx.beginPath(); ctx.moveTo(20,20); ctx.lineTo(20,100); ctx.lineTo(70,100); ctx.closePath(); ctx.stroke(); Note: no primitives other than fillRect()

  26. Drawing a circle var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.beginPath(); ctx.arc(95, 50, 40, 0, 2*Math.PI); ctx.stroke(); Why 2*PI?

  27. The arc function arc(x, y, r, start, stop, antic);

  28. Combination ctx.moveTo(0,0); ctx.lineTo(100, 200); ctx.arcTo(350,350,100,100,20);

  29. BezierCurves ctx.moveTo(0,0); ctx.quadraticCurveTo(100, 25, 0, 50); // context.quadraticCurveTo(cpx, cpy, x, y)

  30. clearRectcommand varc=document.getElementById("myCanvas"); varctx=c.getContext("2d"); ctx.fillStyle="red"; ctx.fillRect(0,0,300,150); ctx.clearRect(20, 20, 100, 50);

  31. Dynamically load images var c=document.getElementById("myCanvas"); varctx=c.getContext("2d"); varhelloWorldImage = new Image(); helloWorldImage.src = "helloworld.gif”; helloWorldImage.onload= function () { ctx.drawImage(helloWorldImage, 160, 130); } What is this?

  32. Dynamically load images 1. ctx.drawImage(img, dx, dy); 2. ctx.drawImage(img, dx, dy, dw, dh); 3. ctx.drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh); What is this?

  33. Using HTML img tags var c=document.getElementById("myCanvas"); varctx=c.getContext("2d"); varimg=document.getElementById("scream"); ctx.drawImage(img,10,10); … <img id="scream" src=”my_scream_image.jpg” /> <canvas> </canvas>

  34. Capturing pixel data var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); varformElement = document.getElementById("createImageData"); formElement.addEventListener('click', createImageDataPressed, false); function createImageDataPressed(e) { window.open( c.toDataURL() ); } <input type="button" id="createImageData" value="Export Image" />

  35. Window parameters function createImageDataPressed(e) { window.open(c.toDataURL(),"canvasImage","left=0,top=0,width=" + c.width+ ",height=" + c.height +",toolbar=0,resizable=0"); }

  36. The Canvas State • Each canvas context can save and restore multiple states • A state can be pushed onto a stack using the save() command • A state can be restored using the restore() command • A state has several properties: • Values of lineWIdth, fillStyle, strokeStyle… etc • The transformation matrix • Current clipping region

  37. The Canvas State … ctx.strokeStyle= "red"; ctx.fillStyle= "yellow"; ctx.lineWidth= 10; ctx.fillRect(25,25,100,125); ctx.strokeRect(25,25,100,125); ctx.save(); ctx.strokeStyle= "green"; ctx.fillStyle= "blue"; ctx.lineWidth= 5; ctx.fillRect(175, 25, 100, 125); ctx.strokeRect(175, 25, 100, 125); ctx.restore(); ctx.fillRect(325, 25, 100, 125); ctx.strokeRect(325,25,100,125); 1. How many rectangles will there be? 2. What fill colour will the third rectangles have?

  38. Why is a stack of states useful?

  39. Shadows var c=document.getElementById("myCanvas"); varctx=c.getContext("2d"); ctx.shadowBlur=10; ctx.shadowOffsetX=20; ctx.shadowColor="black"; ctx.fillStyle="red"; ctx.fillRect(20,20,100,80);

  40. Patterns var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); var img=document.getElementById("lamp"); var pat=ctx.createPattern(img,"repeat"); ctx.rect(0,0,150,100); ctx.fillStyle=pat; ctx.fill();

  41. Patterns var pat = ctx.createPattern(img,"repeat");

  42. Gradients var c=document.getElementById("myCanvas"); varctx=c.getContext("2d"); vargrd = ctx.createLinearGradient(0,0,170,0); grd.addColorStop(0,"black"); grd.addColorStop(1,"white"); ctx.fillStyle = grd; ctx.fillRect(20,20,150,100);

  43. Clipping paths ctx.rect(0, 0, 50, 50); ctx.clip(); // What happens here? // only pixel data will be rendered within the area set by the rect function

  44. Canvas Transformations • Three basic transformation features • Translate • Scale • Rotate • NOTE WORTHY: • Transforms affect any subsequent drawing commands. • Transforms are additive (What does this mean?)

  45. Translate translate(x, y); This function moves the 0,0 origin of the canvas.

  46. Translate ctx.fillStyle = "blue"; ctx.fillRect(0,0,100,50); // translate origin to center of the canvas ctx.translate(ctx.canvas.width/2, ctx.canvas.height/2); ctx.fillRect(0,0,100,50);

  47. Translate

  48. Scale scale(x, y); Scale subsequent drawing commands by factors of x and y.

  49. Scale ctx.fillRect(0, 0, 100, 50); ctx.scale(1.5, 2); ctx.fillRect(125, 50, 100, 50); // What will the height of the 2nd rectangle actually be?

More Related