HTML5 Examples drawing on canvas (paths, text, video), mouse events, timed events, objects, semantic elements, etc.

HTML5 Examplesdrawing on canvas (paths, text, video), mouse events, timed events, objects, semantic elements, etc. Jeanine Meyer Purchase College/SUNY Author: The Essential Guide to HTML5

Overview • Background • Show and explain 4 examples, focus on • drawing paths (lines & arcs), rectangles & text on canvas • semantic elements • use of CSS for font families, decoration, color of text • translate, scale coordinate system • object oriented programming to produce stub application for dragging of 'objects' using mouse events • change of cursor icon • video elements and drawing video on canvas • timed events • structured way for sequence of drawings • Q & A

Background • HTML5 is next new thing...still in development • canvas, video, semantic elements, events, etc. • Browser support mixed • Firefox, Safari, Chrome, Opera ahead of IE • 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!

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 • Origamihttp://faculty.purchase.edu/jeanine.meyer/html5/origamifrog.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5/origamifish.html

NOTE on these and other HTML5 examples You 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...

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) HTML5 logo

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

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); ...

dologo, cont. ctx.fillStyle = "#E34C26"; // given in W3C spec ctx.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(); ....

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.

Use object style of programming + display list Rect and Oval constructor, draw, move, check-for-collision methods Using mouse events requires access to accurate mouse position Changed cursor icon Building and moving shapes (stub for application)

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(); }

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...

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;}

draw method for oval shapes function 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(); }

definition of [what will be] overcheck method function 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 }}

Current situation for native support of video requires 3 video files for distinct codecs Use setInterval video captured at different frames drawImageto 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 Chromesee props Video bouncing in a box

setup including animaiton function 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); }

Code/markup for video In 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

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();

General system for origami directions mountain fold line valley fold line 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! Origami

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.

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"); }

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++;}

Q & A Discussion 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): jeanine.meyer@purchase.edu Thank you!

HTML5 Examples drawing on canvas (paths, text, video), mouse events, timed events, objects, semantic elements, etc.