{"id":73133,"date":"2026-05-27T03:01:00","date_gmt":"2026-05-26T17:01:00","guid":{"rendered":"https:\/\/www.rjmprogramming.com.au\/ITblog\/?p=73133"},"modified":"2026-05-26T12:08:33","modified_gmt":"2026-05-26T02:08:33","slug":"canvas-methods-revisit-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/canvas-methods-revisit-tutorial\/","title":{"rendered":"Canvas Methods Revisit Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/svg_to_canvas.html\" rel=\"noopener\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Canvas Methods Revisit Tutorial\" src=\"\/HTMLCSS\/canvas_drawimage_three.jpg\" title=\"Canvas Methods Revisit Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Canvas Methods Revisit Tutorial<\/p><\/div>\n<p>When we started being &#8220;blown away&#8221; by the potential of the HTML<sup>5<\/sup> <a target=\"_blank\" title='HTML Canvas element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ref_canvas.asp' rel=\"noopener\">canvas<\/a> element coming into play quite some time ago now, it was a bit like &#8230;<\/p>\n<blockquote><p>\nWow!!  But where to start?\n<\/p><\/blockquote>\n<p> &#8230; and due to our naivety we were not in a position back then to break down what was &#8220;cut through&#8221; <font size=1>(or not that practical, perhaps)<\/font> about the canvas element &#8220;methods&#8221; with any authority.  Over the years, though, we are more equipped, so what we are setting out to do is &#8230;<\/p>\n<ul>\n<li>start with, though written a while ago, still to this day, feels like an advanced canvas application (as explained at <a title='Canvas DrawImage First Parameter Primer Tutorial' href='#cdifppt'>Canvas DrawImage First Parameter Primer Tutorial<\/a>) involving video elements <font size=1>(ie. we got a lot of help, thanks all)<\/font> &#8230; and use this template &#8230;<\/li>\n<li>to work it the other way <font size=1>(via new dropdown elements)<\/font>, building on &#8220;what you might aspire to if you are a beginner with the canvas element&#8221; and display new options to emphasise the hu<sup>u<\/sup><sub>u<\/sub><sup>u<\/sup><sub>u<\/sub><sup>u<\/sup><sub>u<\/sub><sup>u<\/sup><sub>u<\/sub><sup>u<\/sup><sub>u<\/sub><sup>u<\/sup><sub>u<\/sub>gely valuable canvas methods out there <font size=1>(yes, <a target=\"_blank\" title='OOP information from Wikipedia ... thanks' href='http:\/\/en.wikipedia.org\/wiki\/Object-oriented_programming' rel=\"noopener\">OOP<\/a> methods, not functions, as such)<\/font><\/li>\n<\/ul>\n<p>The first cab off the rank here is the &#8230;<\/p>\n<p><code><br \/>\n[canvasContext].drawImage([inObjectThatSuits], [X co-ordinate], [Y co-ordinate]);<br \/>\n<\/code><\/p>\n<p> &#8230; simplest usage of that drawImage method <font size=1>(in &#8220;OOP land&#8221; this 3 argument call can be thought of as &#8220;not the same logic&#8221; as (what we are going to get to later, for example) an 8 argument call)<\/font>.  A form is presented here, and you, the user, can see the effects of controlling the 3 arguments <font size=1>(and you&#8217;ll notice &#8220;no truck&#8221; is given to any 5 <sup>minute?<\/sup> arguments here)<\/font>.<\/p>\n<p>Feel free to have a go yourself with <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/svg_to_canvas.html-GETME\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/svg_to_canvas.html-GETME\" rel=\"noopener\">svg_to_canvas.html<\/a> &#8220;what we&#8217;ll call&#8221; <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/svg_to_canvas.html\" rel=\"noopener\">Canvas Showcase<\/a> web application you can also try below &#8230;<\/p>\n<p><iframe style=width:100%;height:900px;zoom:0.45; src=\"\/\/www.rjmprogramming.com.au\/HTMLCSS\/svg_to_canvas.html\"><\/iframe><\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=\"_blank\" href='\/\/www.rjmprogramming.com.au\/ITblog\/canvas-methods-revisit-tutorial\/' rel=\"noopener\">Canvas Methods Revisit Tutorial<\/a> ...<\/p-->\n<hr>\n<p id='cdifppt'>Previous relevant <a target=\"_blank\" title='Canvas DrawImage First Parameter Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/canvas-drawimage-first-parameter-primer-tutorial\/' rel=\"noopener\">Canvas DrawImage First Parameter Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/svg_to_canvas.html\" rel=\"noopener\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Canvas DrawImage First Parameter Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/Mac\/GoToMeeting\/svg_to_canvas.gif\" title=\"Canvas DrawImage First Parameter Primer Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Canvas DrawImage First Parameter Primer Tutorial<\/p><\/div>\n<p>Some time ago we presented a short tutorial about a great online product addressing a big area of interest to online users &#8230; online meetings.  We showcased the great <a target=\"_blank\" title='GoToMeeting landing page' href='http:\/\/www.gotomeeting.com\/' rel=\"noopener\">GoToMeeting<\/a>, with <a title='GoToMeeting Primer Tutorial' href='#gtmpt'>GoToMeeting Primer Tutorial<\/a>, and we remember using it to good effect among &#8230;<\/p>\n<ul>\n<li>installing software remotely<\/li>\n<li>diagnosing software and hardware issues remotely<\/li>\n<li>discussing issues remoting<\/li>\n<li>client liaisson remotely<\/li>\n<\/ul>\n<p> &#8230; at a job involving <a target=\"_blank\" title='EDI information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Electronic_data_interchange' rel=\"noopener\">EDI<\/a> solutions with SAP Business One and Accpac.   But that is just the subject matter basis here.  Today we really want to use some media from that subject matter basis and use it&#8217;s video media as the first argument to the wonderful, the stupendous <a target=\"_blank\" title='Canvas drawImage information from W3schools' href='https:\/\/www.w3schools.com\/tags\/canvas_drawimage.asp' rel=\"noopener\">Canvas drawImage() Method<\/a>, specifically its fascinating <font color=blue>first parameter<\/font> &#8230;<\/p>\n<blockquote cite='https:\/\/www.w3schools.com\/tags\/canvas_drawimage.asp'><p>\nSyntax<br \/>\nPosition the image on the canvas:<br \/>\n<br \/>\ncontext.drawImage(<font color=blue>img<\/font>, x, y)<br \/>\nPosition the image on the canvas, and specify width and height of the image:<br \/>\n<br \/>\ncontext.drawImage(<font color=blue>img<\/font>, x, y, width, height)<br \/>\nClip the image and position the clipped part on the canvas:<br \/>\n<br \/>\ncontext.drawImage(<font color=blue>img<\/font>, sx, sy, swidth, sheight, x, y, width, height)\n<\/p><\/blockquote>\n<p>Don&#8217;t be fooled!  It is a method offering, <a target=\"_blank\" title='Useful link, thanks' href='https:\/\/observablehq.com\/@severo\/canvasimagesource' rel=\"noopener\">thanks<\/a>, <font color=blue>so much more that just an<\/font> &#8230;<\/p>\n<blockquote cite='https:\/\/observablehq.com\/@severo\/canvasimagesource'>\n<table>\n<thead>\n<tr>\n<th><!--code-->el<!--\/code--> interface<\/th>\n<th><!--code-->intrinsicHeight(el)<!--\/code--><\/th>\n<th><!--code-->intrinsicWidth(el)<!--\/code--><\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><font color=blue>HTMLImageElement<\/font><\/td>\n<td><!--code-->el.naturalWidth<!--\/code--><\/td>\n<td><!--code-->el.naturalHeight<!--\/code--><\/td>\n<\/tr>\n<tr>\n<td>SVGImageElement<\/td>\n<td><!--code-->el.[&#8230; special case]<!--\/code--><\/td>\n<td><!--code-->el.[&#8230; special case]<!--\/code--><\/td>\n<\/tr>\n<tr>\n<td><font color=purple>HTMLVideoElement<\/font><\/td>\n<td><!--code-->el.videoWidth<!--\/code--><\/td>\n<td><!--code-->el.videoHeight<!--\/code--><\/td>\n<\/tr>\n<tr>\n<td>HTMLCanvasElement<\/td>\n<td><!--code-->el.width<!--\/code--><\/td>\n<td><!--code-->el.height<!--\/code--><\/td>\n<\/tr>\n<tr>\n<td>ImageBitmap<\/td>\n<td><!--code-->el.width<!--\/code--><\/td>\n<td><!--code-->el.height<!--\/code--><\/td>\n<\/tr>\n<tr>\n<td>OffscreenCanvas<\/td>\n<td><!--code-->el.width<!--\/code--><\/td>\n<td><!--code-->el.height<!--\/code--><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/blockquote>\n<p> &#8230; but <font color=purple>whaaaaatttttt?!<\/font>  What happens <font color=purple>here assigning a video object as a first parameter to the canvas (context)&#8217;s drawImage method<\/font>?  It takes a snapshot image of the slide of the playing (and if not, the first image of that) video!  That means, couch that in a codeline like &#8230;<\/p>\n<p><code><br \/>\nsetInterval(function(){ ctx.drawImage(ovid, 800, 0); }, 100);<br \/>\n<\/code><\/p>\n<p> &#8230; at the right time, and you can be playing a video into the canvas!  Yay!!!  Actually, we&#8217;ve done this before, and, call us innocents if you like, but this gave us the same thrill then, thanks to all the online contributors regarding heads up ideas here.<\/p>\n<p>But we are &#8220;value adding&#8221; today.  It hadn&#8217;t occurred to us that we could do this video to the right of the canvas and dedicate the left side to captions, and that over there, there was enough room to show the &#8220;whole blurb&#8221; <font size=1>&#8230; and nothing but the blurb<\/font>, and that if we use &#8230;<\/p>\n<ul>\n<li>HTML video element attribute &#8230; autostart=true<\/li>\n<li>HTML video element attribute &#8230; autoplay=true<\/li>\n<li>HTML video element attribute &#8230; loop=true<\/li>\n<\/ul>\n<p> &#8230; even if they do not work right from the document.body onload event time, once the video play button is clicked, we could do without the actual video from then on, perhaps <font size=1>(we&#8217;ve allowed you to resurrect the video display, and have more work into the future, maybe, regarding the repercussions of this &#8230; we&#8217;ll see?!)<\/font>.<\/p>\n<p>What form of caption source did we use?  We happened to have a &#8220;.srt&#8221; format WebVTT file pertinent to the GoToMeeting video hanging about, and so we shoved it <font color=blue>into the innards of an HTML textarea element<\/font>, and coded it from there &#8230;<\/p>\n<p><code><br \/>\n&lt;html&gt;<br \/>\n&lt;head&gt;<br \/>\n&lt;title&gt;SVG to Canvas - RJM Programming - May, 2024 ... thanks to https:\/\/jsfiddle.net\/Na6X5\/&lt;\/title&gt;<br \/>\n&lt;style&gt;<br \/>\ncanvas {<br \/>\n    border: 1px solid gray;<br \/>\n}<br \/>\n&lt;\/style&gt;<br \/>\n&lt;script type='text\/javascript'&gt;<br \/>\nvar divstrc='';<br \/>\nvar timings=[];<br \/>\nvar times=[];<br \/>\nvar tstimes=[];<br \/>\nvar blurbs=[];<br \/>\nvar cf = \"12px Verdana\";<br \/>\nvar thisy=20, thisi=0, thisc=0;<br \/>\nvar can=null, ctx=null;<br \/>\nvar collist=['black','blue','purple','magenta','darkred','darkgreen'];<br \/>\nvar lenc=eval('' + collist.length);<br \/>\nvar oppmode='none';<br \/>\n<br \/>\nfunction tanal(intr) {<br \/>\n  var pts=intr.split(':');<br \/>\n  console.log(intr);<br \/>\n  tstimes.push(eval(eval(pts[0] * 60 * 60 * 1000) + eval(pts[1] * 60 * 1000) + eval(pts[2] * 1000)));<br \/>\n  return intr;<br \/>\n}<br \/>\n<br \/>\nfunction onl() {<br \/>\ncan = document.getElementById('canvas1');<br \/>\nctx = can.getContext('2d');<br \/>\n<br \/>\nvar svg = document.getElementById('simage');<br \/>\nvar oimg = document.getElementById('simg');<br \/>\nvar ovid = document.getElementById('myvd');<br \/>\n<br \/>\ndivstrc=document.getElementById('divsrt').value;<br \/>\ntimings=divstrc.split(' --&gt; ');<br \/>\n\/\/alert(timings.length);<br \/>\ntimes.push(tanal(timings[0].slice(-13).trim()));<br \/>\nfor (var ii=1; ii&lt;timings.length; ii++) {<br \/>\n  if (1 == 2) { times.push(tanal(timings[ii].substring(0,13).trim())); }<br \/>\n  if (eval(1 + ii) != eval('' + timings.length)) {<br \/>\n  times.push(tanal(timings[ii].slice(-13).trim()));<br \/>\n  } else {<br \/>\n  times.push(tanal(timings[ii].substring(0,13).trim()));<br \/>\n  }<br \/>\n  blurbs.push(timings[ii].split(String.fromCharCode(10))[1]);<br \/>\n}<br \/>\n<br \/>\nconsole.log(blurbs);<br \/>\nconsole.log(tstimes);<br \/>\n<br \/>\nvar img = new Image();<br \/>\nimg.onload = function() {<br \/>\n\/\/ctx.drawImage(svg, 0, 0);<br \/>\n\/\/ctx.drawImage(img, 200, 0);<br \/>\n\/\/ctx.drawImage(oimg, 400, 0);<br \/>\n\/\/ovid.play();<br \/>\nsetInterval(function(){ ctx.drawImage(ovid, 800, 0); }, 100);<br \/>\n}<br \/>\n\/\/img.src = \"http:\/\/upload.wikimedia.org\/wikipedia\/commons\/d\/d2\/Svg_example_square.svg\";<br \/>\n\/\/img.src = \"\/hexagon.svg\";<br \/>\n\/\/img.src = \"\/homecircle.svg\";<br \/>\nimg.src=oimg.src;<br \/>\n}<br \/>\n<br \/>\nfunction dotext() {<br \/>\n  if (eval(1 + thisi) &gt;= eval('' + tstimes.length)) {<br \/>\n    thisc++;<br \/>\n    if (thisc &gt;= eval('' + collist.length)) {<br \/>\n      collist.push(collist[eval(thisc % lenc)]);<br \/>\n    }<br \/>\n    return loadsrt('');<br \/>\n  }<br \/>\n  setTimeout(dotext, eval(tstimes[eval(1 + thisi)] - tstimes[eval(0 + thisi)]));<br \/>\n  ctx.font = cf;<br \/>\n  ctx.strokeStyle=collist[thisc];<br \/>\n  ctx.strokeText(blurbs[thisi],20,thisy);<br \/>\n  thisy+=15;<br \/>\n  thisi++;<br \/>\n}<br \/>\n<br \/>\nfunction loadsrt(dsp) {<br \/>\n  thisi=0;<br \/>\n  thisy=20;<br \/>\n  setTimeout(dotext, tstimes[0]);<br \/>\n  if (dsp != '') {<br \/>\n    document.getElementById('mysummary').innerHTML='Please click to toggle video display ...';<br \/>\n  }<br \/>\n  return dsp;<br \/>\n}<br \/>\n&lt;\/script&gt;<br \/>\n&lt;\/head&gt;<br \/>\n&lt;body onload=\"onl();\"&gt;<br \/>\n&lt;canvas style='background-color:yellow;' id=\"canvas1\" width=\"1400\" height=\"400\"&gt;&lt;\/canvas&gt;<br \/>\n<br \/>\n&lt;div id=previd style=\"display:none;\"&gt;<br \/>\n&lt;svg id=\"mySVG\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" version=\"1.1\"&gt;<br \/>\n  &lt;rect width=\"150\" height=\"150\" fill=\"rgb(0, 255, 0)\" stroke-width=\"1\" stroke=\"rgb(0, 0, 0)\"\/&gt;<br \/>\n&lt;\/svg&gt;<br \/>\n<br \/>\n&lt;svg id=\"mySVGimage\" width=\"300\" height=\"300\" viewBox=\"0 0 300 300\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" version=\"1.1\"&gt;<br \/>\n  &lt;image id=simage href=\"\/hexagon.svg\" height=\"300\" width=\"300\" \/&gt;<br \/>\n&lt;\/svg&gt;<br \/>\n<br \/>\n&lt;img id=simg src='data:image\/svg+xml;utf8,&lt;svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\" version=\"1.1\" id=\"Layer_1\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" enable-background=\"new 0 0 100 100\" xml:space=\"preserve\" height=\"100px\" width=\"100px\"&gt;<br \/>\n&lt;g&gt;<br \/>\n  &lt;path d=\"M28.1,36.6c4.6,1.9,12.2,1.6,20.9,1.1c8.9-0.4,19-0.9,28.9,0.9c6.3,1.2,11.9,3.1,16.8,6c-1.5-12.2-7.9-23.7-18.6-31.3   c-4.9-0.2-9.9,0.3-14.8,1.4C47.8,17.9,36.2,25.6,28.1,36.6z\"\/&gt;<br \/>\n  &lt;path d=\"M70.3,9.8C57.5,3.4,42.8,3.6,30.5,9.5c-3,6-8.4,19.6-5.3,24.9c8.6-11.7,20.9-19.8,35.2-23.1C63.7,10.5,67,10,70.3,9.8z\"\/&gt;<br \/>\n  &lt;path d=\"M16.5,51.3c0.6-1.7,1.2-3.4,2-5.1c-3.8-3.4-7.5-7-11-10.8c-2.1,6.1-2.8,12.5-2.3,18.7C9.6,51.1,13.4,50.2,16.5,51.3z\"\/&gt;<br \/>\n  &lt;path d=\"M9,31.6c3.5,3.9,7.2,7.6,11.1,11.1c0.8-1.6,1.7-3.1,2.6-4.6c0.1-0.2,0.3-0.4,0.4-0.6c-2.9-3.3-3.1-9.2-0.6-17.6   c0.8-2.7,1.8-5.3,2.7-7.4c-5.2,3.4-9.8,8-13.3,13.7C10.8,27.9,9.8,29.7,9,31.6z\"\/&gt;<br \/>\n  &lt;path d=\"M15.4,54.7c-2.6-1-6.1,0.7-9.7,3.4c1.2,6.6,3.9,13,8,18.5C13,69.3,13.5,61.8,15.4,54.7z\"\/&gt;<br \/>\n  &lt;path d=\"M39.8,57.6C54.3,66.7,70,73,86.5,76.4c0.6-0.8,1.1-1.6,1.7-2.5c4.8-7.7,7-16.3,6.8-24.8c-13.8-9.3-31.3-8.4-45.8-7.7   c-9.5,0.5-17.8,0.9-23.2-1.7c-0.1,0.1-0.2,0.3-0.3,0.4c-1,1.7-2,3.4-2.9,5.1C28.2,49.7,33.8,53.9,39.8,57.6z\"\/&gt;<br \/>\n  &lt;path d=\"M26.2,88.2c3.3,2,6.7,3.6,10.2,4.7c-3.5-6.2-6.3-12.6-8.8-18.5c-3.1-7.2-5.8-13.5-9-17.2c-1.9,8-2,16.4-0.3,24.7   C20.6,84.2,23.2,86.3,26.2,88.2z\"\/&gt;<br \/>\n  &lt;path d=\"M30.9,73c2.9,6.8,6.1,14.4,10.5,21.2c15.6,3,32-2.3,42.6-14.6C67.7,76,52.2,69.6,37.9,60.7C32,57,26.5,53,21.3,48.6   c-0.6,1.5-1.2,3-1.7,4.6C24.1,57.1,27.3,64.5,30.9,73z\"\/&gt;<br \/>\n&lt;\/g&gt;<br \/>\n&lt;\/svg&gt;'&gt;&lt;\/img&gt;<br \/>\n&lt;\/div&gt;<br \/>\n<br \/>\n&lt;details onclick=\" document.getElementById('myvd').style.display=oppmode;  if (oppmode == 'block') { oppmode='none'; } else { oppmode='block'; }\" open&gt;&lt;summary id=mysummary&gt;Please click play button below ...&lt;\/summary&gt;<br \/>\n&lt;video onplay=\"this.style.display=loadsrt('none');\" id=myvd autoplay=true autostart=true loop=true controls&gt;&lt;source src='\/Mac\/GoToMeeting\/GoToMeeting.m4v' type='video\/mp4'&gt;&lt;\/source&gt;&lt;\/video&gt;<br \/>\n&lt;div id=divhs style=display:inline-block;vertical-align:top;&gt;<br \/>\n&lt;h1&gt;Video and Captions to Canvas&lt;\/h1&gt;<br \/>\n&lt;h3&gt;RJM Programming - May, 2024&lt;\/h3&gt;<br \/>\n&lt;h4&gt;Thanks to https:\/\/jsfiddle.net\/Na6X5\/&lt;\/h4&gt;<br \/>\n&lt;\/div&gt;<br \/>\n&lt;\/details&gt;<br \/>\n<br \/>\n&lt;textarea id=divsrt style=\"display:none;\"&gt;<br \/>\n<font color=blue>WEBVTT FILE<br \/>\n<br \/>\n1<br \/>\n00:00:00.100 --&gt; 00:00:01.000 D:vertical A:start<br \/>\nWelcome to our GoTo Meeting tutorial ...<br \/>\n{<br \/>\n\"title\": \"GoTo Meeting tutorial image 1 of 5\",<br \/>\n\"description\": \"Welcome to our GoTo Meeting tutorial\",<br \/>\n\"src\": \"gm1.jpg\",<br \/>\n\"href\": \"http:\/\/www.rjmprogramming.com.au\/PHP\/videos\"<br \/>\n}<br \/>\n<br \/>\n2<br \/>\n00:00:01.000 --&gt; 00:00:04.000<br \/>\n... we've installed GoTo Meeting and started it up.  We have done the invite so we will be the \"Presenter\" ...<br \/>\n<br \/>\n3<br \/>\n00:00:04.000 --&gt; 00:00:06.000<br \/>\n... we click \"Show My Screen\" ...<br \/>\n{<br \/>\n\"title\": \"GoTo Meeting tutorial image 2 of 5\",<br \/>\n\"description\": \"Show My Screen\",<br \/>\n\"src\": \"gm2.jpg\",<br \/>\n\"href\": \"http:\/\/www.rjmprogramming.com.au\/PHP\/videos\"<br \/>\n}<br \/>\n<br \/>\n4<br \/>\n00:00:06.000 --&gt; 00:00:16.000<br \/>\n... which is enabled because we are the \"Presenter\".  Now lets ready other things ready to make a connection ...<br \/>\n<br \/>\n5<br \/>\n00:00:16.000 --&gt; 00:00:22.000<br \/>\n... we click \"Show My Webcam\" and start Connecting ...<br \/>\n{<br \/>\n\"title\": \"GoTo Meeting tutorial image 3 of 5\",<br \/>\n\"description\": \"Show My Webcam\",<br \/>\n\"src\": \"gm3.jpg\",<br \/>\n\"href\": \"http:\/\/www.rjmprogramming.com.au\/PHP\/videos\"<br \/>\n}<br \/>\n<br \/>\n6<br \/>\n00:00:22.000 --&gt; 00:00:24.000<br \/>\n... the GoTo Viewer appears showing you a view of the person you are meeting ...<br \/>\n<br \/>\n7<br \/>\n00:00:24.000 --&gt; 00:00:26.000<br \/>\n... we have \"lift off\" ...<br \/>\n{<br \/>\n\"title\": \"GoTo Meeting tutorial image 4 of 5\",<br \/>\n\"description\": \"Lift Off\",<br \/>\n\"src\": \"gm4.jpg\",<br \/>\n\"href\": \"http:\/\/www.rjmprogramming.com.au\/PHP\/videos\"<br \/>\n}<br \/>\n<br \/>\n8<br \/>\n00:00:26.000 --&gt; 00:00:28.000<br \/>\n... lo and behold, we've called ourself ...<br \/>\n<br \/>\n9<br \/>\n00:00:28.000 --&gt; 00:00:32.000<br \/>\n... have a look at us looking at us ...<br \/>\n<br \/>\n10<br \/>\n00:00:32.000 --&gt; 00:00:52.000<br \/>\n... but don't let it blow your mind?!<br \/>\n{<br \/>\n\"title\": \"GoTo Meeting tutorial image 5 of 5\",<br \/>\n\"description\": \"Don't blow your mind\",<br \/>\n\"src\": \"gm5.jpg\",<br \/>\n\"href\": \"http:\/\/www.rjmprogramming.com.au\/PHP\/videos\"<br \/>\n}<br \/>\n<br \/>\n11<br \/>\n00:00:52.000 --&gt; 00:01:34.000<br \/>\nLeaving the GoTo Meeting now.  See you again soon.<\/font><br \/>\n&lt;\/textarea&gt;<br \/>\n<br \/>\n&lt;\/body&gt;<br \/>\n&lt;\/html&gt;<br \/>\n<\/code><\/p>\n<p>Yes, we started the day with a different idea, and end up where we are at with our <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/svg_to_canvas.html_GETME\" rel=\"noopener\">first draft<\/a> proof of concept <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/svg_to_canvas.html\" rel=\"noopener\">Video to Canvas<\/a> web application incarnation &#8230; <a target=\"_blank\" title=\"?\" href='https:\/\/www.youtube.com\/watch?v=e9_7GcQeiqw&#038;t=2m37s' rel=\"noopener\">again<\/a>.<\/p>\n<p><iframe style=\"width:100%;height:900px;\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/svg_to_canvas.html\"><\/iframe><\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=\"_blank\" href='\/\/www.rjmprogramming.com.au\/ITblog\/canvas-drawimage-first-parameter-primer-tutorial\/' rel=\"noopener\">Canvas DrawImage First Parameter Primer Tutorial<\/a>.<\/p-->\n<hr>\n<p id='gtmpt'>Previous relevant <a target=\"_blank\" title='GoToMeeting Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/gotomeeting-primer-tutorial\/' rel=\"noopener\">GoToMeeting Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/GoToMeeting\/\" rel=\"noopener\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"GoToMeeting Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/Mac\/GoToMeeting\/GoToMeeting-80aof.jpg\" title=\"GoToMeeting Primer Tutorial\"  \/><\/a><p class=\"wp-caption-text\">GoToMeeting Primer Tutorial<\/p><\/div>\n<p>Here is a <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/GoToMeeting\/\" title='\u00c7lick picture.' rel=\"noopener\">tutorial<\/a> that introduces you to GoToMeeting.   GoToMeeting is a great user-friendly video conferencing software by <a target=\"_blank\" title='Citrix' href='http:\/\/www.citrix.com\/' rel=\"noopener\">Citrix<\/a>.<\/p>\n<p>For simple scenarios I&#8217;ve always felt comfortable with GoToMeeting for that video conferencing functionality, or for how I usually used it, remotely testing, troubleshooting and\/or installing software on remote client sites.   Other choices for all Windows scenarios, here are <a target=\"_blank\" title='Remote Desktop information from Wikipedia' href='http:\/\/en.wikipedia.org\/wiki\/Remote_desktop_software' rel=\"noopener\">Remote Desktop<\/a>, and for mixed scenarios, <a target=\"_blank\" title='Virtual Network Computing' href='http:\/\/en.wikipedia.org\/wiki\/VNC' rel=\"noopener\">VNC<\/a>.<\/p>\n<p>GoToMeeting can work with a phone connection or by using the Microphone and Speakers at both ends of the connection.   You can host the meeting or join the meeting, share your keyboard or mouse, share your display via a shared webcam, as necessary, meet straight away, or schedule it, or email an invitation &#8230; all in all there is a lot of great functionality.   Like with Skype, audio and visual can be considered separate &#8230; from our tutorial session here is some <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/GoToMeeting\/GoToMeeting.m4a\" title='GoToMeeting audio ... feedback can be caused by settings that need tweaking, or cables loose, or proximity (which causes the echo on this clip ... the laptop and iPad being within a metre!)' rel=\"noopener\">audio<\/a>, and here is some <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/GoToMeeting\/GoToMeeting.m4v\" title='GoToMeeting video' rel=\"noopener\">visual<\/a> (ie. video).<\/p>\n<p>Other such meeting ideas can be accessed via <a target=\"_blank\" title='Skype, by Microsoft' href='http:\/\/www.skype.com\/' rel=\"noopener\">Skype<\/a>, or <a target=\"_blank\" title='WebEx, by Citrix' href='http:\/\/www.webex.com.au\/' rel=\"noopener\">WebEx<\/a> Web Conferencing.   All these are great ideas that can save companies lots of money on overseas trips!<\/p>\n<p>Link to GoToMeeting &#8220;spiritual home&#8221; at <a target=\"_blank\" title='GoToMeeting landing page' href='http:\/\/www.gotomeeting.com\/' rel=\"noopener\">GoToMeeting<\/a>, which is owned by Citrix.<\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d7474' onclick='var dv=document.getElementById(\"d7474\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=Skype\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d7474' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d63553' onclick='var dv=document.getElementById(\"d63553\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/video\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d63553' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d73133' onclick='var dv=document.getElementById(\"d73133\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/drawimage\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d73133' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>When we started being &#8220;blown away&#8221; by the potential of the HTML5 canvas element coming into play quite some time ago now, it was a bit like &#8230; Wow!! But where to start? &#8230; and due to our naivety we &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/canvas-methods-revisit-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,14,28,37],"tags":[184,2518,541,576,578,652,1830,875,997,1319],"class_list":["post-73133","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-oop","category-tutorials","tag-canvas","tag-drawimage","tag-graphics","tag-html","tag-html5","tag-javascript","tag-method","tag-oop","tag-programming","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/73133"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=73133"}],"version-history":[{"count":6,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/73133\/revisions"}],"predecessor-version":[{"id":73139,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/73133\/revisions\/73139"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=73133"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=73133"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=73133"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}