<html>
<head>
<title>SVG to Canvas - RJM Programming - May, 2024 ... thanks to https://jsfiddle.net/Na6X5/</title>
<style>
canvas {
border: 1px solid gray;
}
</style>
<script type='text/javascript'>
var divstrc='';
var timings=[];
var times=[];
var tstimes=[];
var blurbs=[];
var cf = "12px Verdana";
var thisy=20, thisi=0, thisc=0;
var can=null, ctx=null;
var collist=['black','blue','purple','magenta','darkred','darkgreen'];
var lenc=eval('' + collist.length);
var oppmode='none';
function tanal(intr) {
var pts=intr.split(':');
console.log(intr);
tstimes.push(eval(eval(pts[0] * 60 * 60 * 1000) + eval(pts[1] * 60 * 1000) + eval(pts[2] * 1000)));
return intr;
}
function onl() {
can = document.getElementById('canvas1');
ctx = can.getContext('2d');
var svg = document.getElementById('simage');
var oimg = document.getElementById('simg');
var ovid = document.getElementById('myvd');
divstrc=document.getElementById('divsrt').value;
timings=divstrc.split(' --> ');
//alert(timings.length);
times.push(tanal(timings[0].slice(-13).trim()));
for (var ii=1; ii<timings.length; ii++) {
if (1 == 2) { times.push(tanal(timings[ii].substring(0,13).trim())); }
if (eval(1 + ii) != eval('' + timings.length)) {
times.push(tanal(timings[ii].slice(-13).trim()));
} else {
times.push(tanal(timings[ii].substring(0,13).trim()));
}
blurbs.push(timings[ii].split(String.fromCharCode(10))[1]);
}
console.log(blurbs);
console.log(tstimes);
var img = new Image();
img.onload = function() {
//ctx.drawImage(svg, 0, 0);
//ctx.drawImage(img, 200, 0);
//ctx.drawImage(oimg, 400, 0);
//ovid.play();
setInterval(function(){ ctx.drawImage(ovid, 800, 0); }, 100);
}
//img.src = "http://upload.wikimedia.org/wikipedia/commons/d/d2/Svg_example_square.svg";
//img.src = "/hexagon.svg";
//img.src = "/homecircle.svg";
img.src=oimg.src;
}
function dotext() {
if (eval(1 + thisi) >= eval('' + tstimes.length)) {
thisc++;
if (thisc >= eval('' + collist.length)) {
collist.push(collist[eval(thisc % lenc)]);
}
return loadsrt('');
}
setTimeout(dotext, eval(tstimes[eval(1 + thisi)] - tstimes[eval(0 + thisi)]));
ctx.font = cf;
ctx.strokeStyle=collist[thisc];
ctx.strokeText(blurbs[thisi],20,thisy);
thisy+=15;
thisi++;
}
function loadsrt(dsp) {
thisi=0;
thisy=20;
setTimeout(dotext, tstimes[0]);
if (dsp != '') {
document.getElementById('mysummary').innerHTML='Please click to toggle video display ...';
}
return dsp;
}
function changeim(oinp) {
if (oinp.value.trim() != '') {
document.getElementById('animg').src=oinp.value;
}
}
function mayberesultalread() {
mayberesultalready(document.getElementById('result').innerHTML);
}
function mayberesultalready(intv) {
if (document.getElementById('result') && intv.indexOf('data:') == 0) {
document.getElementById('animg').onload=function(event){
var filt=document.getElementById('selopt').innerText;
//alert(1);
lastim=document.getElementById('animg');
if (lastim.src.indexOf('data:') != -1) {
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
if (ourdcanvas == 'browsefor') {
document.getElementById('browsefor').innerHTML='';
}
ourdcanvas='d' + 'canvas';
}
newcanvas=document.getElementById('mymobilecanvas'); //document.createElement('canvas');
//alert(111);
if (lastim.width > 800) {
newcanvas.width=800;
newcanvas.height=Math.round(lastim.height * 800 / lastim.width);
//alert('Wh=' + newcanvas.width + 'x' + newcanvas.height);
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
newcanvas.getContext('2d').globalCompositeOperation = 'multiply';
}
if (filt != '') { newcanvas.getContext('2d').filter=filt; }
newcanvas.getContext('2d').drawImage(lastim, 0, 0, lastim.width, lastim.height, 0, 0, newcanvas.width, newcanvas.height);
lesserinurl=newcanvas.toDataURL('image/jpeg', 0.1);
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
document.getElementById('animg').src=lesserinurl;
} else if (1 == 2) {
document.getElementById('animg').style.width='800px';
document.getElementById('animg').style.width='' + newcanvas.height + 'px';
}
//return '';
} else {
newcanvas.width=lastim.width;
//alert('' + lastim.width + 'x' + lastim.height);
newcanvas.height=lastim.height;
//alert('wh=' + newcanvas.width + 'x' + newcanvas.height);
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
newcanvas.getContext('2d').globalCompositeOperation = 'multiply';
}
if (filt != '') { newcanvas.getContext('2d').filter=filt; }
newcanvas.getContext('2d').drawImage(lastim, 0, 0);
lesserinurl=newcanvas.toDataURL('image/jpeg', 0.1);
}
}
if (document.getElementById('animg').outerHTML.indexOf(' style="') != -1) {
if (document.getElementById('animg').outerHTML.split(' style="')[1].split('"')[0].indexOf('filter:') != -1) {
filt=document.getElementById('animg').outerHTML.split(' style="')[1].split('"')[0].split('filter:')[1].split(';')[0].trim();
document.getElementById(ourdcanvas).innerHTML='<details id=dtlcanvas><summary id=sumcanvas>Canvas view below ...</summary><br><br><canvas ' + ocm + ' id=mycanvas width=' + lastim.width + ' height=' + lastim.height + '></canvas></details><hr></hr><br><br>';
} else {
document.getElementById(ourdcanvas).innerHTML='<details id=dtlcanvas><summary id=sumcanvas>Canvas view below ...</summary><br><br><canvas ' + ocm + ' style="' + document.getElementById('animg').outerHTML.split(' style="')[1].split('"')[0] + '" id=mycanvas width=' + lastim.width + ' height=' + lastim.height + '></canvas></details><hr></hr><br><br>';
}
} else {
document.getElementById(ourdcanvas).innerHTML='<details id=dtlcanvas><summary id=sumcanvas>Canvas view below ...</summary><br><br><canvas ' + ocm + ' id=mycanvas width=' + lastim.width + ' height=' + lastim.height + '></canvas></details><hr></hr><br><br>';
}
//alert(11);
lastca=document.getElementById('mycanvas');
lastca.width=lastim.width;
lastca.height=lastim.height;
lastcac=lastca.getContext('2d');
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
lastcac.globalCompositeOperation = 'multiply';
}
if (filt != '') { lastcac.filter=filt; }
lastcac.drawImage(document.getElementById('animg'), 0, 0); //lastcac.drawImage(event.target, 0, 0);
//alert(111);
lastim=document.getElementById('animg');
//alert(1111);
};
document.getElementById('animg').src=intv;
document.getElementById('result').innerHTML='';
document.getElementById('cbi').src='/HTMLCSS/client_browsing.htm?d=' + Math.floor(Math.random() * 19878654) + '&wording=Allimages%20images%2E%20';
}
}
function resultdriven() {
if (document.getElementById('result').innerHTML.indexOf('data:') == 0) {
document.getElementById('iurl').value=document.getElementById('result').innerHTML;
document.getElementById('result').innerHTML='';
document.getElementById('cbi').src='/HTMLCSS/client_browsing.htm?d=' + Math.floor(Math.random() * 19878654) + '&wording=Allimages%20images%2E%20';
}
if (document.getElementById('iurl')) {
if (document.getElementById('iurl').value.indexOf('data:') == 0 && document.getElementById('animg').src != document.getElementById('iurl').value) {
document.getElementById('animg').src=document.getElementById('iurl').value;
}
}
}
function process(osel) {
switch (osel.value) {
case 'di3':
document.getElementById('detvideo').style.display='none';
document.getElementById('previd').style.display='none';
if (document.getElementById('detdi5')) {
document.getElementById('detdi5').innerHTML=document.getElementById('sumdi5').outerHTML;
}
if (document.getElementById('detdi9')) {
document.getElementById('detdi9').innerHTML=document.getElementById('sumdi9').outerHTML;
}
document.getElementById('sumdi3').innerHTML='<br><br><h1>Canvas DrawImage 3 arguments (Positioning) example which is actioned by your form filling and clicking ... <sup><select id=mysela onchange=process(this); style=width:30px;><option value=" ">Other Canvas Usage Ideas below ...</option><option value=di3 selected>Canvas DrawImage 3 arguments ... Positioning</option><option value=di5>Canvas DrawImage 5 arguments ... Positioning and Scaling</option><option value=di9>Canvas DrawImage 9 arguments ... Slicing and Scaling and Cropping</option></select></sup></h1>';
document.getElementById('sumdi3').style.display='block';
document.getElementById('detdi3').style.display='block';
document.getElementById('detdi3').innerHTML+='<form onsubmit="ctx.drawImage(document.getElementById(' + "'animg'" + '), document.getElementById(' + "'thex'" + ').value, document.getElementById(' + "'they'" + ').value); return false;"><input style=width:50%; onblur=changeim(this); type=url id=iurl name=iurl value="" placeholder="Image URL ... or ..."></input> <iframe class="spag" scrolling="no" id="cbi" frameborder="0" style="width:175px;height:200px;margin-top:-164px;" data-ok="218,-194" data-nmok="200,-178" src="/HTMLCSS/client_browsing.htm?d=332160562686&wording=Allimages%20images%2E%20"></iframe><br><br>X: <input type=number name=thex id=thex value=0 step=1></input> Y: <input type=number name=they id=they value=0 step=1></input><br><br><input style=background-color:lightgreen; type=submit value="Draw Image above as well ..."></input></form><br><br>';
break;
case 'di5':
document.getElementById('detvideo').style.display='none';
document.getElementById('previd').style.display='none';
if (document.getElementById('detdi3')) {
document.getElementById('detdi3').innerHTML=document.getElementById('sumdi3').outerHTML;
}
if (document.getElementById('detdi9')) {
document.getElementById('detdi9').innerHTML=document.getElementById('sumdi9').outerHTML;
}
document.getElementById('sumdi5').innerHTML='<br><br><h1>Canvas DrawImage 5 arguments (Positioning and Scaling) example which is actioned by your form filling and clicking ... <sup><select id=mysela onchange=process(this); style=width:30px;><option value=" ">Other Canvas Usage Ideas below ...</option><option value=di3>Canvas DrawImage 3 arguments ... Positioning</option><option value=di5 selected>Canvas DrawImage 5 arguments ... Positioning and Scaling</option><option value=di9>Canvas DrawImage 9 arguments ... Slicing and Scaling and Cropping</option></select></sup></h1>';
document.getElementById('sumdi5').style.display='block';
document.getElementById('detdi5').style.display='block';
document.getElementById('detdi5').innerHTML+='<form onsubmit="ctx.drawImage(document.getElementById(' + "'animg'" + '), document.getElementById(' + "'thex'" + ').value, document.getElementById(' + "'they'" + ').value, document.getElementById(' + "'thewidth'" + ').value, document.getElementById(' + "'theheight'" + ').value); return false;"><input style=width:50%; onblur=changeim(this); type=url id=iurl name=iurl value="" placeholder="Image URL ... or ..."></input> <iframe class="spag" scrolling="no" id="cbi" frameborder="0" style="width:175px;height:200px;margin-top:-164px;" data-ok="218,-194" data-nmok="200,-178" src="/HTMLCSS/client_browsing.htm?d=332160562686&wording=Allimages%20images%2E%20"></iframe><br><br>X: <input type=number name=thex id=thex value=0 step=1></input> Y: <input type=number name=they id=they value=0 step=1></input> Width: <input type=number name=thewidth id=thewidth value=0 step=1></input> Height: <input type=number name=theheight id=theheight value=0 step=1></input><br><br><input style=background-color:lightgreen; type=submit value="Draw Image above as well ..."></input></form><br><br>';
break;
case 'di9':
document.getElementById('detvideo').style.display='none';
document.getElementById('previd').style.display='none';
if (document.getElementById('detdi3')) {
document.getElementById('detdi3').innerHTML=document.getElementById('sumdi3').outerHTML;
}
if (document.getElementById('detdi5')) {
document.getElementById('detdi5').innerHTML=document.getElementById('sumdi5').outerHTML;
}
document.getElementById('sumdi9').innerHTML='<br><br><h1>Canvas DrawImage 9 arguments (Slicing and Scaling and Cropping) example which is actioned by your form filling and clicking ... <sup><select id=mysela onchange=process(this); style=width:30px;><option value=" ">Other Canvas Usage Ideas below ...</option><option value=di3>Canvas DrawImage 3 arguments ... Positioning</option><option value=di5>Canvas DrawImage 5 arguments ... Positioning and Scaling</option><option value=di9 selected>Canvas DrawImage 9 arguments ... Slicing and Scaling and Cropping</option></select></sup></h1>';
document.getElementById('sumdi9').style.display='block';
document.getElementById('detdi9').style.display='block';
document.getElementById('detdi9').innerHTML+='<form onsubmit="ctx.drawImage(document.getElementById(' + "'animg'" + '), document.getElementById(' + "'thex'" + ').value, document.getElementById(' + "'they'" + ').value, document.getElementById(' + "'theswidth'" + ').value, document.getElementById(' + "'thesheight'" + ').value, document.getElementById(' + "'thecx'" + ').value, document.getElementById(' + "'thecy'" + ').value, document.getElementById(' + "'thewidth'" + ').value, document.getElementById(' + "'theheight'" + ').value); return false;"><input style=width:50%; onblur=changeim(this); type=url id=iurl name=iurl value="" placeholder="Image URL ... or ..."></input> <iframe class="spag" scrolling="no" id="cbi" frameborder="0" style="width:175px;height:200px;margin-top:-164px;" data-ok="218,-194" data-nmok="200,-178" src="/HTMLCSS/client_browsing.htm?d=332160562686&wording=Allimages%20images%2E%20"></iframe><br><br>X: <input style=width:95px; type=number name=thex id=thex value=0 step=1></input> Y: <input style=width:95px; type=number name=they id=they value=0 step=1></input> <sup>Clipped</sup> <sub>Width</sub>: <input style=width:95px; type=number name=theswidth id=theswidth value=0 step=1></input> <sup>Clipped</sup> <sub>Height</sub>: <input style=width:95px; type=number name=thesheight id=thesheight value=0 step=1></input> <sup>Final</sup> <sub>X</sub>: <input style=width:95px; type=number name=thecx id=thecx value=0 step=1></input> <sup>Final</sup> <sub>Y</sub>: <input style=width:95px; type=number name=thecy id=thecy value=0 step=1></input> <sup>Final</sup> <sub>Width</sub>: <input style=width:95px; type=number name=thewidth id=thewidth value=0 step=1></input> <sup>Final</sup> <sub>Height</sub>: <input style=width:95px; type=number name=theheight id=theheight value=0 step=1></input><br><br><input style=background-color:lightgreen; type=submit value="Draw Image above as well ..."></input></form><br><br>';
break;
case ' ':
location.href=document.URL.split('?')[0].split('#')[0];
break;
default:
break;
}
}
setInterval(resultdriven, 5000);
</script>
</head>
<body onload="onl();">
<canvas style='background-color:yellow;' id="canvas1" width="1400" height="400"></canvas>
<div id=previd style="display:none;">
<svg id="mySVG" xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect width="150" height="150" fill="rgb(0, 255, 0)" stroke-width="1" stroke="rgb(0, 0, 0)"/>
</svg>
<svg id="mySVGimage" width="300" height="300" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg" version="1.1">
<image id=simage href="/hexagon.svg" height="300" width="300" />
</svg>
<img id=simg src='data:image/svg+xml;utf8,<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">
<g>
<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"/>
<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"/>
<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"/>
<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"/>
<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"/>
<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"/>
<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"/>
<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"/>
</g>
</svg>'></img>
</div>
<details id=detvideo onclick=" document.getElementById('myvd').style.display=oppmode; if (oppmode == 'block') { oppmode='none'; } else { oppmode='block'; }" open><summary id=mysummary>Please click play button below ...</summary>
<video onplay="this.style.display=loadsrt('none');" id=myvd autoplay=true autostart=true loop=true controls><source src='/Mac/GoToMeeting/GoToMeeting.m4v' type='video/mp4'></source></video>
<div id=divhs style=display:inline-block;vertical-align:top;>
<h1>Video and Captions to Canvas <sup><select id=mysel onchange=process(this); style=width:30px;><option value=''>Other Canvas Usage Ideas below ...</option><option value='di3'>Canvas DrawImage 3 arguments ... Positioning</option><option value='di5'>Canvas DrawImage 5 arguments ... Positioning and Scaling</option><option value='di9'>Canvas DrawImage 9 arguments ... Slicing and Scaling and Cropping</option></select></sup></h1>
<h3>RJM Programming - May, 2024</h3>
<h4>Thanks to https://jsfiddle.net/Na6X5/</h4>
</div>
</details>
<details id=detdi3 style=display:none; open><summary style=display:none; id=sumdi3></summary>
</details>
<details id=detdi5 style=display:none; open><summary style=display:none; id=sumdi5></summary>
</details>
<details id=detdi9 style=display:none; open><summary style=display:none; id=sumdi9></summary>
</details>
<textarea id=divsrt style="display:none;">
WEBVTT FILE
1
00:00:00.100 --> 00:00:01.000 D:vertical A:start
Welcome to our GoTo Meeting tutorial ...
{
"title": "GoTo Meeting tutorial image 1 of 5",
"description": "Welcome to our GoTo Meeting tutorial",
"src": "gm1.jpg",
"href": "http://www.rjmprogramming.com.au/PHP/videos"
}
2
00:00:01.000 --> 00:00:04.000
... we've installed GoTo Meeting and started it up. We have done the invite so we will be the "Presenter" ...
3
00:00:04.000 --> 00:00:06.000
... we click "Show My Screen" ...
{
"title": "GoTo Meeting tutorial image 2 of 5",
"description": "Show My Screen",
"src": "gm2.jpg",
"href": "http://www.rjmprogramming.com.au/PHP/videos"
}
4
00:00:06.000 --> 00:00:16.000
... which is enabled because we are the "Presenter". Now lets ready other things ready to make a connection ...
5
00:00:16.000 --> 00:00:22.000
... we click "Show My Webcam" and start Connecting ...
{
"title": "GoTo Meeting tutorial image 3 of 5",
"description": "Show My Webcam",
"src": "gm3.jpg",
"href": "http://www.rjmprogramming.com.au/PHP/videos"
}
6
00:00:22.000 --> 00:00:24.000
... the GoTo Viewer appears showing you a view of the person you are meeting ...
7
00:00:24.000 --> 00:00:26.000
... we have "lift off" ...
{
"title": "GoTo Meeting tutorial image 4 of 5",
"description": "Lift Off",
"src": "gm4.jpg",
"href": "http://www.rjmprogramming.com.au/PHP/videos"
}
8
00:00:26.000 --> 00:00:28.000
... lo and behold, we've called ourself ...
9
00:00:28.000 --> 00:00:32.000
... have a look at us looking at us ...
10
00:00:32.000 --> 00:00:52.000
... but don't let it blow your mind?!
{
"title": "GoTo Meeting tutorial image 5 of 5",
"description": "Don't blow your mind",
"src": "gm5.jpg",
"href": "http://www.rjmprogramming.com.au/PHP/videos"
}
11
00:00:52.000 --> 00:01:34.000
Leaving the GoTo Meeting now. See you again soon.
</textarea>
<div id=danimg><img id=animg src=''></img></div>
<div id="result" style=display:none;></div><div id="resultav" style=display:none;></div><div id="videoag" style=display:none;></div><input type=hidden id="audioname" style=display:none; value=""></input><input type=hidden id="outputname" style=display:none; value=""></input><input type=hidden id="cto" style=display:none; value=""></input><input type=hidden id="thewords" style=display:none; value=""></input><input type=hidden id="saysub" style=display:none; value=""></input>
</body>
</html>