html5 examples drawing on canvas (paths, text, video), mouse events, timed events, objects, semantic...
TRANSCRIPT
![Page 1: HTML5 Examples drawing on canvas (paths, text, video), mouse events, timed events, objects, semantic elements, etc. Jeanine Meyer Purchase College/SUNY](https://reader031.vdocuments.site/reader031/viewer/2022032611/56649cd65503460f9499e0ec/html5/thumbnails/1.jpg)
HTML5 Examplesdrawing on canvas (paths, text, video), mouse events, timed events, objects,
semantic elements, etc.
Jeanine MeyerPurchase College/SUNY
Author: The Essential Guide to HTML5
![Page 2: HTML5 Examples drawing on canvas (paths, text, video), mouse events, timed events, objects, semantic elements, etc. Jeanine Meyer Purchase College/SUNY](https://reader031.vdocuments.site/reader031/viewer/2022032611/56649cd65503460f9499e0ec/html5/thumbnails/2.jpg)
Overview• Background• Show and explain 4 examples, focus on
o drawing paths (lines & arcs), rectangles & text on canvaso semantic elements o use of CSS for font families, decoration, color of texto translate, scale coordinate systemo object oriented programming to produce stub application
for dragging of 'objects' using mouse eventso change of cursor icono video elements and drawing video on canvaso timed eventso structured way for sequence of drawings
• Q & A
![Page 3: HTML5 Examples drawing on canvas (paths, text, video), mouse events, timed events, objects, semantic elements, etc. Jeanine Meyer Purchase College/SUNY](https://reader031.vdocuments.site/reader031/viewer/2022032611/56649cd65503460f9499e0ec/html5/thumbnails/3.jpg)
Background• HTML5 is next new thing...still in development
o canvas, video, semantic elements, events, etc.• Browser support mixed
o Firefox, Safari, Chrome, Opera ahead of IEo Firefox NOT always ahead, but it does have Error
Console• Formal W3C document is not easy to decipher...but/and
many on-line sources, including you!
• My background: early career at IBM Research in robotics and manufacturing, now in academia, teaching math/cs, new media and also general education courses. I like programming!
![Page 4: HTML5 Examples drawing on canvas (paths, text, video), mouse events, timed events, objects, semantic elements, etc. Jeanine Meyer Purchase College/SUNY](https://reader031.vdocuments.site/reader031/viewer/2022032611/56649cd65503460f9499e0ec/html5/thumbnails/4.jpg)
Examples• HTML5 logo, with scaling and use of CSS formatted footer
http://faculty.purchase.edu/jeanine.meyer/html5/html5logoscale.html• Application stub: drawing rectangles and ovals, drag and
drop http://faculty.purchase.edu/jeanine.meyer/html5/build1.html• Bouncing video masked to be a circle
http://faculty.purchase.edu/jeanine.meyer/html5/videobounce.html • Origami
http://faculty.purchase.edu/jeanine.meyer/html5/origamifrog.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5/origamifish.html
![Page 5: HTML5 Examples drawing on canvas (paths, text, video), mouse events, timed events, objects, semantic elements, etc. Jeanine Meyer Purchase College/SUNY](https://reader031.vdocuments.site/reader031/viewer/2022032611/56649cd65503460f9499e0ec/html5/thumbnails/5.jpg)
NOTE on these and other HTML5 examplesYou always can look at the source using the View source option in the browser.
Complex examples may have separate and multiple files, especially for CSS and JavaScript.
Most people are open to comments. I sometimes write tutorials...
![Page 6: HTML5 Examples drawing on canvas (paths, text, video), mouse events, timed events, objects, semantic elements, etc. Jeanine Meyer Purchase College/SUNY](https://reader031.vdocuments.site/reader031/viewer/2022032611/56649cd65503460f9499e0ec/html5/thumbnails/6.jpg)
HTML5 logo • use beginPath, moveTo, lineTo, fill to draw shield
• built on other work (they had the x,y positions for the shield, but no HTML) and this motivated a use of translate
• added slider (new input type) -- use of another coordinate transformation: scale
• used drawing text on canvas and [regular] text
• used article and footer (CSS formatting)
![Page 7: HTML5 Examples drawing on canvas (paths, text, video), mouse events, timed events, objects, semantic elements, etc. Jeanine Meyer Purchase College/SUNY](https://reader031.vdocuments.site/reader031/viewer/2022032611/56649cd65503460f9499e0ec/html5/thumbnails/7.jpg)
Organization of dologo
text (HTML)
5 sided orange background right hand, lighter orange part of background light gray, left hand side part of the 5: 2 paths white, right hand side of the 5: 2 paths
![Page 8: HTML5 Examples drawing on canvas (paths, text, video), mouse events, timed events, objects, semantic elements, etc. Jeanine Meyer Purchase College/SUNY](https://reader031.vdocuments.site/reader031/viewer/2022032611/56649cd65503460f9499e0ec/html5/thumbnails/8.jpg)
Code snippets for logo<input id="slide" type="range" min="0" max="100" value="100" onChange="changescale(this.value)" step="10"/> function changescale(val) {factorvalue = val / 100;dologo(); } function dologo() { var offsety = 80 ; ctx.restore(); ctx.save(); ctx.clearRect(0,0,600,400); ctx.scale(factorvalue,factorvalue); ctx.fillText("HTML", 31,60); ctx.translate(0,offsety); ...
![Page 9: HTML5 Examples drawing on canvas (paths, text, video), mouse events, timed events, objects, semantic elements, etc. Jeanine Meyer Purchase College/SUNY](https://reader031.vdocuments.site/reader031/viewer/2022032611/56649cd65503460f9499e0ec/html5/thumbnails/9.jpg)
dologo, cont.
ctx.fillStyle = "#E34C26"; // given in W3C specctx.beginPath(); ctx.moveTo(39, 250); ctx.lineTo(17, 0); ctx.lineTo(262, 0); ctx.lineTo(239, 250); ctx.lineTo(139, 278); ctx.closePath(); ctx.fill();
....
![Page 10: HTML5 Examples drawing on canvas (paths, text, video), mouse events, timed events, objects, semantic elements, etc. Jeanine Meyer Purchase College/SUNY](https://reader031.vdocuments.site/reader031/viewer/2022032611/56649cd65503460f9499e0ec/html5/thumbnails/10.jpg)
CSS for footer, article<style> footer {display:block; border-top: 1px solid orange; margin: 10px; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight: bold; } article {display:block; font-family: Georgia, "Times New Roman", Times, serif; margin: 5px;} </style>
NOTES The border-top puts an orange line before footer. The two font-family directives provide back-up. The display:block directives provide the line breaks.
![Page 11: HTML5 Examples drawing on canvas (paths, text, video), mouse events, timed events, objects, semantic elements, etc. Jeanine Meyer Purchase College/SUNY](https://reader031.vdocuments.site/reader031/viewer/2022032611/56649cd65503460f9499e0ec/html5/thumbnails/11.jpg)
Building and moving shapes (stub for application)• Use object style of
programming + display listo Rect and Ovalo constructor, draw,
move, check-for-collision methods
• Using mouse events requires access to accurate mouse position
• Changed cursor icon
![Page 12: HTML5 Examples drawing on canvas (paths, text, video), mouse events, timed events, objects, semantic elements, etc. Jeanine Meyer Purchase College/SUNY](https://reader031.vdocuments.site/reader031/viewer/2022032611/56649cd65503460f9499e0ec/html5/thumbnails/12.jpg)
init (invoked by onLoad in <body> )
function init() { canvas1 = document.getElementById('canvas'); canvas1.onmousedown = function () { return false; }; canvas1.addEventListener('mousedown',startdragging,false); ctx = canvas1.getContext("2d");
var r1 = new Rect(10,10,100,200,"red"); var s1 = new Rect(30,200, 50,50,"blue"); var oval1 = new Oval(200,350,60,2.0,1.0, "teal"); var cir1 = new Oval(300,200,100,1.0,1.0,"brown");
stuff.push(r1); stuff.push(s1); stuff.push(oval1); stuff.push(cir1); drawstuff(); }
![Page 13: HTML5 Examples drawing on canvas (paths, text, video), mouse events, timed events, objects, semantic elements, etc. Jeanine Meyer Purchase College/SUNY](https://reader031.vdocuments.site/reader031/viewer/2022032611/56649cd65503460f9499e0ec/html5/thumbnails/13.jpg)
drawstuff function
function drawstuff() { ctx.clearRect(0,0,600,500); for (var i=0;i<stuff.length;i++) { stuff[i].draw(); } }
Code expects that each element of step will have a draw method...
![Page 14: HTML5 Examples drawing on canvas (paths, text, video), mouse events, timed events, objects, semantic elements, etc. Jeanine Meyer Purchase College/SUNY](https://reader031.vdocuments.site/reader031/viewer/2022032611/56649cd65503460f9499e0ec/html5/thumbnails/14.jpg)
Constructor function for ovals
function Oval(x,y,r,hor,ver,c) { this.x = x; this.y = y; this.r = r; this.hor = hor; this.ver = ver; this.move = move; this.draw = drawoval; this.color = c; this.overcheck = checkoval;}
![Page 15: HTML5 Examples drawing on canvas (paths, text, video), mouse events, timed events, objects, semantic elements, etc. Jeanine Meyer Purchase College/SUNY](https://reader031.vdocuments.site/reader031/viewer/2022032611/56649cd65503460f9499e0ec/html5/thumbnails/15.jpg)
draw method for oval shapesfunction drawoval() { ctx.save(); ctx.translate(this.x,this.y); ctx.scale(this.hor,this.ver); ctx.fillStyle = this.color; ctx.beginPath(); ctx.arc(0,0,this.r,0,2*Math.PI,true); ctx.closePath(); ctx.fill(); ctx.restore(); }
![Page 16: HTML5 Examples drawing on canvas (paths, text, video), mouse events, timed events, objects, semantic elements, etc. Jeanine Meyer Purchase College/SUNY](https://reader031.vdocuments.site/reader031/viewer/2022032611/56649cd65503460f9499e0ec/html5/thumbnails/16.jpg)
definition of [what will be] overcheck methodfunction checkoval(mx,my) {//computes positions in translated &scaled coordinate systemvar x1 = 0; //this is this.x - this.xvar y1 = 0;var x2 = (mx-this.x)/this.hor;var y2 = (my-this.y)/this.ver;if (distsq(x1,y1,x2,y2)<=(this.r*this.r) ){ return true} else { return false }}
![Page 17: HTML5 Examples drawing on canvas (paths, text, video), mouse events, timed events, objects, semantic elements, etc. Jeanine Meyer Purchase College/SUNY](https://reader031.vdocuments.site/reader031/viewer/2022032611/56649cd65503460f9499e0ec/html5/thumbnails/17.jpg)
Video bouncing in a box• Current situation for native
support of video requires 3 video files for distinct codecs
• Use setIntervalo video captured at
different frames• drawImage to put video
on canvas with a shape (filled in paths) moving in sync to be a mask
• mask with hole works in Firefox, Opera but need two-paths for Chrome
see props
![Page 18: HTML5 Examples drawing on canvas (paths, text, video), mouse events, timed events, objects, semantic elements, etc. Jeanine Meyer Purchase College/SUNY](https://reader031.vdocuments.site/reader031/viewer/2022032611/56649cd65503460f9499e0ec/html5/thumbnails/18.jpg)
setup including animaitonfunction init(){ ctx = document.getElementById('canvas').getContext('2d'); v = document.getElementById("vid"); v.addEventListener("ended",restart,false); // because loop doesn't work on FF
v.width = v.videoWidth/3; v.height = v.videoHeight/3; videow = v.width; videoh = v.height; maskrad = .4*Math.min(videow,videoh); ctx.lineWidth = ballrad; ctx.strokeStyle ="rgb(200,0,50)"; ctx.fillStyle="white"; v.play(); setInterval(drawscene,50); }
![Page 19: HTML5 Examples drawing on canvas (paths, text, video), mouse events, timed events, objects, semantic elements, etc. Jeanine Meyer Purchase College/SUNY](https://reader031.vdocuments.site/reader031/viewer/2022032611/56649cd65503460f9499e0ec/html5/thumbnails/19.jpg)
Code/markup for videoIn body element<video id="vid" loop="loop" preload="auto"> <source src="joshuahomerun.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> <source src="joshuahomerun.webmvp8.webm" type='video/webm; codec="vp8, vorbis"'> <source src="joshuahomerun.theora.ogv" type='video/ogg; codecs="theora, vorbis"'> Your browser does not accept the video tag. </video>
In script element, in init function...v = document.getElementById("vid");
In script element, in drawscene, strategy is erase canvas draw video ctx.drawImage(v,ballx+boxx, bally+box, v.width,v.height); draw (white) filled in path to be the mask
![Page 20: HTML5 Examples drawing on canvas (paths, text, video), mouse events, timed events, objects, semantic elements, etc. Jeanine Meyer Purchase College/SUNY](https://reader031.vdocuments.site/reader031/viewer/2022032611/56649cd65503460f9499e0ec/html5/thumbnails/20.jpg)
ctx.beginPath(); ctx.moveTo(ballx+boxx,bally+boxy); ctx.lineTo(ballx+boxx+v.width,bally+boxy); ctx.lineTo(ballx+boxx+v.width,bally+boxy+.5*v.height); ctx.lineTo(ballx+boxx+.5*v.width+maskrad, bally+boxy+.5*v.height); ctx.arc(ballx+boxx+.5*v.width,bally+boxy+.5*v.height,maskrad,0, Math.PI,true); ctx.lineTo(ballx+boxx,bally+boxy+.5*v.height); ctx.lineTo(ballx+boxx,bally+boxy); ctx.fill(); ctx.moveTo(ballx+boxx,bally+boxy+.5*v.height); ctx.lineTo(ballx+boxx,bally+boxy+v.height); ctx.lineTo(ballx+boxx+v.width,bally+boxy+v.height); ctx.lineTo(ballx+boxx+v.width,bally+boxy+.5*v.height); ctx.lineTo(ballx+boxx+.5*v.width+maskrad,bally+boxy+.5*v.height); ctx.arc(ballx+boxx+.5*v.width,bally+boxy+.5*v.height,maskrad, 0,Math.PI,false); ctx.lineTo(ballx+boxx,bally+boxy+.5*v.height); ctx.fill();
![Page 21: HTML5 Examples drawing on canvas (paths, text, video), mouse events, timed events, objects, semantic elements, etc. Jeanine Meyer Purchase College/SUNY](https://reader031.vdocuments.site/reader031/viewer/2022032611/56649cd65503460f9499e0ec/html5/thumbnails/21.jpg)
Origami
• General system for origami directions o mountain fold lineo valley fold lineo other utility functions
• Use array to hold steps, a step being a function that draws and a text string
• Geometry, trig & algebra to determine coordinates
• Use mainly paths on canvas plus a photograph & videos
• My hobby but/and great example of mathematics AND programming!
![Page 22: HTML5 Examples drawing on canvas (paths, text, video), mouse events, timed events, objects, semantic elements, etc. Jeanine Meyer Purchase College/SUNY](https://reader031.vdocuments.site/reader031/viewer/2022032611/56649cd65503460f9499e0ec/html5/thumbnails/22.jpg)
Organize steps
• Use steps array• Each element is itself an array, consisting of the name of a
function that produces the drawing (or the photo or the video) and a piece of text.
var steps = [ [directions,"Diagram conventions"], [showkami,"Make quarter turn."], [diamond1,"Fold top point to bottom point."], [triangleM,"Divide line into thirds and make valley folds and unfold "], [thirds,"Fold in half to the left."], ...
• I developed these step by step, including going back and inserting new steps• demonstration of iterative design.
![Page 23: HTML5 Examples drawing on canvas (paths, text, video), mouse events, timed events, objects, semantic elements, etc. Jeanine Meyer Purchase College/SUNY](https://reader031.vdocuments.site/reader031/viewer/2022032611/56649cd65503460f9499e0ec/html5/thumbnails/23.jpg)
thirds()
function thirds() { triangle(); skinnyline(ex,ey,gx,gy); skinnyline(fx,fy,hx,hy); curvedarrow(cx,cy,ax,ay,0,-20); valley(jx,jy,dx,dy,"orange"); }
![Page 24: HTML5 Examples drawing on canvas (paths, text, video), mouse events, timed events, objects, semantic elements, etc. Jeanine Meyer Purchase College/SUNY](https://reader031.vdocuments.site/reader031/viewer/2022032611/56649cd65503460f9499e0ec/html5/thumbnails/24.jpg)
The donext (step) function
function donext() { if (nextstep>=steps.length) { nextstep=steps.length-1; } v.pause(); v.style.display = "none"; //erases last video played canvas1.height = 480; //restore height ctx.clearRect(0,0,cwidth,cheight); ctx.lineWidth = origwidth; steps[nextstep][0](); //invokes the function ta.innerHTML = steps[nextstep][1]; nextstep++;}
![Page 25: HTML5 Examples drawing on canvas (paths, text, video), mouse events, timed events, objects, semantic elements, etc. Jeanine Meyer Purchase College/SUNY](https://reader031.vdocuments.site/reader031/viewer/2022032611/56649cd65503460f9499e0ec/html5/thumbnails/25.jpg)
Q & ADiscussion
For JavaScript, Flash ActionScript, Processing, php, etc.: examples, tutorials, workshop charts, lecture charts & other materials for courses, books & papers, activities (e.g., origami), go to http://faculty.purchase.edu/jeanine.meyer
Contact (comments, questions, suggestions, your examples):
Thank you!