html5 canvas. saving information between function calls
TRANSCRIPT
![Page 1: HTML5 CANVAS. SAVING INFORMATION BETWEEN FUNCTION CALLS](https://reader036.vdocuments.mx/reader036/viewer/2022083009/56649e9e5503460f94b9fa09/html5/thumbnails/1.jpg)
HTML5 CANVAS
![Page 2: HTML5 CANVAS. SAVING INFORMATION BETWEEN FUNCTION CALLS](https://reader036.vdocuments.mx/reader036/viewer/2022083009/56649e9e5503460f94b9fa09/html5/thumbnails/2.jpg)
SAVING INFORMATION
BETWEEN FUNCTION CALLS
![Page 3: HTML5 CANVAS. SAVING INFORMATION BETWEEN FUNCTION CALLS](https://reader036.vdocuments.mx/reader036/viewer/2022083009/56649e9e5503460f94b9fa09/html5/thumbnails/3.jpg)
Can I keep information between calls to a function?Why would I want to do it?
PossibilitiesStore and retrieve values from the HTML page
Possible but can be cumbersomeHave a javaScript variable OUTSIDE the function Known as a global variable
Snippets for the carouselelem_ illustrates writing to src outside of a form
SAVING INFORMATION
![Page 4: HTML5 CANVAS. SAVING INFORMATION BETWEEN FUNCTION CALLS](https://reader036.vdocuments.mx/reader036/viewer/2022083009/56649e9e5503460f94b9fa09/html5/thumbnails/4.jpg)
CANVAS
![Page 5: HTML5 CANVAS. SAVING INFORMATION BETWEEN FUNCTION CALLS](https://reader036.vdocuments.mx/reader036/viewer/2022083009/56649e9e5503460f94b9fa09/html5/thumbnails/5.jpg)
RectanglesArcsLines
Features we won’t look at Images Drag and drop Animation
Widely supported
DRAWING PICTURES IN HTML(AND JAVASCRIPT)
![Page 6: HTML5 CANVAS. SAVING INFORMATION BETWEEN FUNCTION CALLS](https://reader036.vdocuments.mx/reader036/viewer/2022083009/56649e9e5503460f94b9fa09/html5/thumbnails/6.jpg)
Canvas tag in HTMLId requiredResizing must be done in tag, NOT CSSIf you go outside canvas, no error, just doesn’t show
<canvas id=“c" height="400" width="800"></canvas> JavaScript to DRAW: step by step
HOW TO DO IT
![Page 7: HTML5 CANVAS. SAVING INFORMATION BETWEEN FUNCTION CALLS](https://reader036.vdocuments.mx/reader036/viewer/2022083009/56649e9e5503460f94b9fa09/html5/thumbnails/7.jpg)
Need to identify the canvas Create a javaScript object that represents the canvas (context) Methods associated with objectvar canvas = document.getElementById(“c");var context = canvas.getContext("2d");
Code needs to wait until loading completes Onload Faster alternative
document.addEventListener('DOMContentLoaded',domloaded,false);function domloaded() {}
Drawn in order of execution
SET UP
![Page 8: HTML5 CANVAS. SAVING INFORMATION BETWEEN FUNCTION CALLS](https://reader036.vdocuments.mx/reader036/viewer/2022083009/56649e9e5503460f94b9fa09/html5/thumbnails/8.jpg)
Most straightforwardDefine by location of upper left corner and size
Grid is defined with (0,0) as upper left cornercontext. fillRect(x, y, width, height);
Set color and then define the rectanglecontext.fi llStyle = "#EF5B84";context.fi llRect(100, 100, 100, 200);
Color Always a string Same formats as in CSS
Opacity: applies to what followscontext.globalAlpha = 0.5;
RECTANGLES
![Page 9: HTML5 CANVAS. SAVING INFORMATION BETWEEN FUNCTION CALLS](https://reader036.vdocuments.mx/reader036/viewer/2022083009/56649e9e5503460f94b9fa09/html5/thumbnails/9.jpg)
Circles and arcscontext.arc(x, y, radius, start-angle, end-angle, dir);
Outline (“pencil”) and then draw (“ink”) Pencil
context.beginPath(); context.arc(x, y, radius, 0, Math.PI * 2, false); context.closePath(); /* closes the shape */
Fillcontext.fi llStyle = "#000"; context.fi ll();
Inkcontext.strokeStyle = "#000"; context.stroke();
ARCS
![Page 10: HTML5 CANVAS. SAVING INFORMATION BETWEEN FUNCTION CALLS](https://reader036.vdocuments.mx/reader036/viewer/2022083009/56649e9e5503460f94b9fa09/html5/thumbnails/10.jpg)
Pencil up, pencil downStart (same as arcs)
context.beginPath();Position
context.moveTo(x,y);Draw (pencil)
context.lineTo(x,y); If you want to close the shape (same as arcs)
context.closePath(); Ink (same as arc)
context.strokeStyle = "#000"; context.stroke();
LINES
![Page 11: HTML5 CANVAS. SAVING INFORMATION BETWEEN FUNCTION CALLS](https://reader036.vdocuments.mx/reader036/viewer/2022083009/56649e9e5503460f94b9fa09/html5/thumbnails/11.jpg)
Mark Pilgrim, Dive into HTML5 Chapter 4: Let’s Call it a Draw(ing Surface)
HTML5 Canvas Basic Tutorials
RESOURCES