https://www.malinc.se/testinghtml5/

Scan ID:
b1fbe90d-611a-468d-9297-ecf43fef88abFinished
Submitted URL:
https://www.malinc.se/testinghtml5/
Report Finished:

The outgoing links identified from the page

JavaScript Variables · 11 found

Global JavaScript variables loaded on the window object of a page, are variables declared outside of functions and accessible from anywhere in the code within the current scope

Console log messages · 0 found

Messages logged to the web console

HTML

The raw HTML body of the page

<!DOCTYPE html><html lang="en"><head>
	<meta charset="utf-8">
	<meta name="google-site-verification" content="arjr-t3pBgitCNG_q5A1J08KBvMkzOjSPAaaUmEegTw">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Testing html5</title>
	<link href="html5.css" rel="stylesheet" type="text/css">
	<script async="" src="//www.google-analytics.com/analytics.js"></script><script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
	<script>!window.jQuery && document.write('<script src="jquery-1.4.4.min.js"><\/script>');</script><script src="jquery-1.4.4.min.js"></script>
	<script>  
		$(document).ready(function() {  
			/********************************************************************************/
			//DISCLAIMER: All code is written by a javascript-newbie
			/********************************************************************************/
			/********************************************************************************/
			//first canvas, rectangles at mousemove
			/********************************************************************************/
			var ctx1 = document.getElementById("canvas1").getContext("2d");  
                
			$('#canvas1').mousemove(function(e){
				posX=e.pageX-this.offsetLeft;
				posY=e.pageY-this.offsetTop;
				ctx1.fillRect(posX, posY, 3, 3);
			});

			/********************************************************************************/			
			//second canvas, lines when pressing mouse
			/********************************************************************************/
			var ctx2 = document.getElementById("canvas2").getContext("2d");
			var draw = false;
			
			$('#canvas2').mousedown(function(e){
				draw=true;
				ctx2.lineWidth=6;
				ctx2.lineCap="round";
				posX=e.pageX-this.offsetLeft;
				posY=e.pageY-this.offsetTop;
				ctx2.moveTo(posX, posY);
			});
			
			$('#canvas2').mousemove(function(e){
				if (draw==true){
					posX=e.pageX-this.offsetLeft;
					posY=e.pageY-this.offsetTop;
					ctx2.lineTo(posX, posY);
					ctx2.stroke();
				}
			});
			
			$('#canvas2').mouseup(function(){
				draw=false;
			});
			
			/********************************************************************************/
			//testing radial gradients on canvas 3-5
			/********************************************************************************/
			var radius=100; //radius of black circle
			var ctx3 = document.getElementById("canvas3").getContext("2d");
			ctx3.fillRect(0,0,400,300);
			var ctx4 = document.getElementById("canvas4").getContext("2d");
			ctx4.fillRect(0,0,400,300);
			var ctx5 = document.getElementById("canvas5").getContext("2d");
			ctx5.fillRect(0,0,400,300);
			
			$('#canvas3,#canvas4,#canvas5').mousemove(function(e){
				posX=e.pageX-this.offsetLeft;
				posY=e.pageY-this.offsetTop;
				paintCanvas3(posX, posY);
				paintCanvas4(posX, posY);
				paintCanvas5(posX, posY);
			});
			
			function paintCanvas3(posX, posY){
				var radgrad=ctx3.createRadialGradient(200,150,radius,posX,posY,1);
				radgrad.addColorStop(0,'#000');
				radgrad.addColorStop(1,'#ff0000');
				ctx3.fillStyle=radgrad;
				ctx3.fillRect(0,0,400,300);
			}		
			
			function paintCanvas4(posX, posY){
				var radgrad=ctx4.createRadialGradient(posX,posY,radius,posX,posY,1);
				radgrad.addColorStop(0,'#000');
				radgrad.addColorStop(1,'#ff0000');
				ctx4.fillStyle=radgrad;
				ctx4.fillRect(0,0,400,300);
			}
			
			function paintCanvas5(posX, posY){
				var radgrad=ctx5.createRadialGradient(posX,posY,radius,200,150,1);
				radgrad.addColorStop(0,'#000');
				radgrad.addColorStop(1,'#ff0000');
				ctx5.fillStyle=radgrad;
				ctx5.fillRect(0,0,400,300);
			}
			
			/********************************************************************************/
			//testing slider
			/********************************************************************************/
			$('#slider').change(function() {
				$('#displayValue').html('black radius = '+this.value);
				radius=this.value;
			});
			
			/********************************************************************************/
			//testing color picker
			/********************************************************************************/
			$('#colorPicker').change(function() {
				$('#displayColor').css('color', this.value);
			});
			
			/********************************************************************************/			
			//inverted rectangles on canvas6
			/********************************************************************************/
			var width=400;
			var height=300;
			var ctx6 = document.getElementById("canvas6").getContext("2d");
			
			var lingrad=ctx6.createLinearGradient(0,0,width,height);
			lingrad.addColorStop(0,'#ff0000');
			lingrad.addColorStop(0.5,'#000');
			lingrad.addColorStop(1,'#ff0000');
			ctx6.fillStyle=lingrad;
			ctx6.fillRect(0,0,width,height);
			
			var firstX, firstY, lastX=-1, lastY; //lastX used as flag for rectangle being drawn or not
			var drawInverted=false;
			var imgd=ctx6.getImageData(0,0,width,height);
			var pix=imgd.data;
			
			$('#canvas6').mousedown(function(e){
				drawInverted=true;
				firstX=e.pageX-this.offsetLeft;
				firstY=e.pageY-this.offsetTop;
			});
			
			$('#canvas6').mousemove(function(e){
				if (lastX!=-1 && drawInverted) {
					invertRectangle(firstX, firstY, lastX, lastY); //erase last drawn rectangle
				}
				lastX=e.pageX-this.offsetLeft;
				lastY=e.pageY-this.offsetTop;
				if (drawInverted) {
					invertRectangle(firstX, firstY, lastX, lastY);
				}
			});
			
			$('#canvas6').mouseup(function(e){
				drawInverted=false;
			 	lastX==-1;
			});
			
			function invertRectangle(x1,y1,x2,y2){
				var yMin = (y1<y2) ? y1 : y2;
				var yMax = (y1<y2) ? y2 : y1;
				var xMin = (x1<x2) ? x1 : x2;
				var xMax = (x1<x2) ? x2 : x1;
				for(var y=yMin; y<yMax; y+=1){
					for(var x=width*(y-1)*4+xMin*4; x<width*(y-1)*4+xMax*4; x+=4){ //one looooong array
						pix[x  ] = 255 - pix[x  ]; // red
  						pix[x+1] = 255 - pix[x+1]; // green
  						pix[x+2] = 255 - pix[x+2]; // blue
  						// x+3 is alpha (the fourth element)
					}
				} 
				ctx6.putImageData(imgd, 0, 0);
			}
			
			/********************************************************************************/
			//inverted squares on canvas7
			//width and height variables from canvas 6 section
			/********************************************************************************/
			var ctx7 = document.getElementById("canvas7").getContext("2d");
			
			var lingrad7=ctx7.createLinearGradient(0,0,width,height);
			lingrad7.addColorStop(0,'#ff0000');
			lingrad7.addColorStop(0.5,'#000');
			lingrad7.addColorStop(1,'#ff0000');
			ctx7.fillStyle=lingrad7;
			ctx7.fillRect(0,0,width,height);
			
			var fX, fY, lX=-1, lY; //lX used as flag for rectangle being drawn or not, ugly cheat
			var drawFilledSquare=false;
			var imgd7=ctx7.getImageData(0,0,width,height);
			var pix7=imgd7.data;
						
			$('#canvas7').mousedown(function(e){
				drawFilledSquare=true;
				fX=e.pageX-this.offsetLeft;
				fY=e.pageY-this.offsetTop;
				firstFilled.x=fX;
				firstFilled.y=fY;
			});
			
			$('#canvas7').mousemove(function(e){
				if (lX!=-1 && drawFilledSquare) {
					invertFilledSquare(fX, fY, lX, lY); //erase last drawn rectangle
				}
				lX=e.pageX-this.offsetLeft;
				lY=e.pageY-this.offsetTop;
				if (drawFilledSquare) {
					invertFilledSquare(fX, fY, lX, lY);
				}
			});
			
			$('#canvas7').mouseup(function(e){
				drawFilledSquare=false;
			 	lX==-1;
			});
			
			function invertFilledSquare(x1,y1,x2,y2){
				var xSide=Math.abs(x2-x1);
				var ySide=Math.abs(y2-y1);
				var side = (xSide<ySide) ? xSide : ySide; //shortest side becomes side of square
				var xMin, xMax, yMin, yMax;
				if (x2>x1) {    //the coordinates from mousedown are always at one edge of the square
					xMin=x1;
					xMax=x1+side;
				} else {
					xMax=x1;
					xMin=xMax-side;
				}
				if (y2>y1) {
					yMin=y1;
					yMax=y1+side;
				} else {
					yMax=y1;
					yMin=yMax-side;
				}
				for(var y=yMin; y<yMax; y+=1){
					for(var x=width*(y-1)*4+xMin*4; x<width*(y-1)*4+xMax*4; x+=4){ //one looooong array
						pix7[x  ] = 255 - pix7[x  ]; // red
  						pix7[x+1] = 255 - pix7[x+1]; // green
  						pix7[x+2] = 255 - pix7[x+2]; // blue
  						// x+3 is alpha (the fourth element)
					}
				} 
				ctx7.putImageData(imgd7, 0, 0);
			}
			
			/********************************************************************************/
			//rubber band squares on canvas8
			//width and height variables from canvas 6 section
			/********************************************************************************/
			var ctx8 = document.getElementById("canvas8").getContext("2d");
			
			var lingrad8=ctx8.createLinearGradient(0,0,width,height);
			lingrad8.addColorStop(0,'#ff0000');
			lingrad8.addColorStop(0.5,'#000');
			lingrad8.addColorStop(1,'#ff0000');
			ctx8.fillStyle=lingrad8;
			ctx8.fillRect(0,0,width,height);
			var imgd8=ctx8.getImageData(0,0,width,height);
			var pix8=imgd8.data;
			
			var first = new Object();
			var last = new Object();
			var currentSquare = new Object();
			var previousSquare = new Object();
			var drawSquare = false;
			var eraseCurrSquare = false;
			var erasePrevSquare = false;
			
			$('#canvas8').mousedown(function(e){
				if (erasePrevSquare) {
					invertSquare(previousSquare);
				}
				first.x = e.pageX-this.offsetLeft;
				first.y = e.pageY-this.offsetTop;
				drawSquare = true;
			});
			
			$('#canvas8').mousemove(function(e){
				if (eraseCurrSquare) {
					invertSquare(currentSquare); 
				}
				if (drawSquare) {
					last.x = e.pageX-this.offsetLeft;
					last.y = e.pageY-this.offsetTop;
					makeSquare();
					invertSquare(currentSquare);
					eraseCurrSquare = true;
				}
			});
			
			$('#canvas8').mouseout (function(e){
				drawSquare = false;
				eraseCurrSquare = false;
				erasePrevSquare = true;
			});
			
			$('#canvas8').mouseup(function(e){
				drawSquare = false;
				eraseCurrSquare = false;
				erasePrevSquare = true;
			});
			
			function makeSquare() {
				var xSide = Math.abs(last.x-first.x);
				var ySide = Math.abs(last.y-first.y);
				var side = (xSide<ySide) ? xSide : ySide; //shortest side becomes side of square
				var xMin, xMax, ymin, yMax;
				if (last.x>first.x) {    //the coordinates from mousedown are always at one edge of the square
					xMin=first.x;
					xMax=first.x+side;
				} else {
					xMax=first.x;
					xMin=first.x-side;
				}
				if (last.y>first.y) {
					yMin=first.y;
					yMax=first.y+side;
				} else {
					yMax=first.y;
					yMin=first.y-side;
				}
				currentSquare.left=xMin;
				currentSquare.top=yMin;
				currentSquare.side=side;
			}
			
			function invertSquare(sq){
				var yMin = sq.top;
				var yMax = sq.top+sq.side;
				for(var x = width*yMin*4+sq.left*4; x<width*yMin*4+(sq.left+sq.side)*4; x+=4){ //draw top side
					pix8[x  ] = 255 - pix8[x  ]; // red
  					pix8[x+1] = 255 - pix8[x+1]; // green
  					pix8[x+2] = 255 - pix8[x+2]; // blue
  					// x+3 is alpha (the fourth element)
				}
				for(var x = width*yMax*4+sq.left*4; x<width*yMax*4+(sq.left+sq.side)*4; x+=4){ //draw bottom side
					pix8[x  ] = 255 - pix8[x  ]; // red
  					pix8[x+1] = 255 - pix8[x+1]; // green
  					pix8[x+2] = 255 - pix8[x+2]; // blue
  					// x+3 is alpha (the fourth element)
				}
				for(var y = sq.top+1; y<(sq.top+sq.side); y+=1){ // draw left side
					var x = width*y*4+sq.left*4;//
					pix8[x  ] = 255 - pix8[x  ]; // red
  					pix8[x+1] = 255 - pix8[x+1]; // green
  					pix8[x+2] = 255 - pix8[x+2]; // blue
  					// x+3 is alpha (the fourth element)
				} 
				for(var y = sq.top+1; y<(sq.top+sq.side); y+=1){ // draw right side
					var x = width*y*4+(sq.left+sq.side-1)*4;
					pix8[x  ] = 255 - pix8[x  ]; // red
  					pix8[x+1] = 255 - pix8[x+1]; // green
  					pix8[x+2] = 255 - pix8[x+2]; // blue
  					// x+3 is alpha (the fourth element)
				} 
				previousSquare.top = currentSquare.top;
			 	previousSquare.left = currentSquare.left;
			 	previousSquare.side = currentSquare.side;
			 	ctx8.putImageData(imgd8, 0, 0);
			}
			
		}); 
	</script>  
	
	<!-- Google Analytics -->
	<script>
	(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
	(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
	m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
	})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
	
	ga('create', 'UA-39523743-1', 'auto');
	ga('send', 'pageview');
	
	</script>
	<!-- End Google Analytics -->

</head>
<body>
	<header>
		<h1>testing html5</h1>
	</header>
	<section class="homebox">
		<p><a href="http://www.malinc.se">home</a></p>
	</section>
	<section>
		<h1>css3</h1>
		<p>...is not html5, but it's suitable for doing a web-browser-check nonetheless</p>
		<p>Opera and IE9 fail at displaying the header, it shouldn't look like this</p>
		<p><img src="images/operaHeader.png" alt="Header in Opera"></p>
		<p>but like this</p>
		<p><img src="images/chromeHeader.png" alt="Header in Chrome"></p>
		<p>but then again, the russian doll effect in this section is made using Opera, so this header actually does
			look better using Opera or IE9</p>
		<ul>
			<li><a href="http://wheelsofsteel.net/">amazing css3: The Wheels of Steel (a web-based DJ prototype)</a></li>
			<li><a href="http://getfirebug.com/">Firebug (the easiest way to inspect CSS-code)</a></li>
		</ul>
	</section>
	<section>
		<h1>video</h1>
		<p>another Julia set animation, with rounded corners, at least in Firefox and IE9</p>
		<p>it can be viewed in full screen if using Safari</p> 
		<p>right-clicking to "Save Video As..." works in all browsers except Safari</p>
		<video width="640" height="360" controls="controls">
			<source src="videos/redBlackJulia.webm" type="video/webm; codecs=&quot;vp8, vorbis&quot;">
			<source src="videos/redBlackJulia.mp4" type="video/mp4; codecs=&quot;avc1.42E01E, mp4a.40.2&quot;">
	  		<source src="videos/redBlackJulia.ogv" type="video/ogg; codecs=&quot;theora, vorbis&quot;">
			<p class="redText">Your browser does not support the video tag.</p>
		</video> 
		<ul>	
			<li><a href="http://diveintohtml5.org/video.html">Dive Into HTML5 - Video on the Web</a></li>		
			<li><a href="http://www.html5rocks.com/en/tutorials/video/basics/">HTML5 rocks - HTML5 video</a></li>
			<li><a href="http://www.mirovideoconverter.com/">Miro Video Converter</a></li>
		</ul>
	</section>
	<section>
		<h1>audio</h1>
		<p>right-clicking to "Save Audio As..." works in all browsers except Safari</p>
		<audio controls="controls">
			<source src="videos/Stop.ogg" type="audio/ogg">
  			<source src="videos/Stop.mp3" type="audio/mpeg">
			<p class="redText">Your browser does not support the audio tag.</p>
		</audio>
		<ul>
			<li><a href="http://ccmixter.org/files/Ghost_k/8721">"Stop" (blue mix) by Ghost_k</a></li>
			<li><a href="http://audacity.sourceforge.net/">Audacity</a></li>
		</ul>
	</section>
	<section>
		<h1>2011-08-26 update - apple alters the code</h1>
		<p style="text-align: left; padding: 0 20px;">
			Apple has strengthen their <em>"we don't care about your license, we prohibit downloading media"</em>-policy.
			In Safari 5.1 it is no longer possible to right-click on either video or audio. 
			When inspecting the code, there are div-elements placed on top of all video- and audio-elements. Those divs are 
			not placed there by the creator of the code, but by Apple.   </p>
		<p style="text-align: left; padding: 0 20px;">To avoid unnecessary installations of Safari, the Apple shadow-divs are 
			shown in the recording below.</p>
		<video width="640" height="360" controls="controls">
			<source src="videos/safari.webm" type="video/webm; codecs=&quot;vp8, vorbis&quot;">
			<source src="videos/safari.mp4" type="video/mp4; codecs=&quot;avc1.42E01E, mp4a.40.2&quot;">
	  		<source src="videos/safari.ogv" type="video/ogg; codecs=&quot;theora, vorbis&quot;">
			<p class="redText">Your browser does not support the video tag.</p>
		</video> 
	</section>
	<section>
		<h1>canvas - simple drawing</h1>
		<p>simplest possible drawing-code (mousemove only), using jQuery since pure javascript causes abdominal pain</p>
		<canvas id="canvas1" width="400" height="300">
			<p class="redText">Your browser does not support the canvas tag.</p>
		</canvas>
		<ul>
			<li><a href="http://net.tutsplus.com/articles/web-roundups/21-ridiculously-impressive-html5-canvas-experiments/">21 Ridiculously Impressive HTML5 Canvas Experiments</a></li>
			<li><a href="http://net.tutsplus.com/tutorials/javascript-ajax/canvas-from-scratch-introducing-canvas/">nettuts - Canvas From Scratch</a></li>
			<li><a href="http://www.goat1000.com/tagcanvas.php">HTML5 CANVAS TAG CLOUD</a></li>
			<li><a href="http://jquery.com/">jQuery</a></li>
			<li><a href="http://net.tutsplus.com/articles/web-roundups/jquery-for-absolute-beginners-video-series/">
				jQuery for Absolute Beginners</a></li>
		</ul>
		<p>drawing by pressing mouse, (mousedown, mousemove, mouseup)</p>
		<canvas id="canvas2" width="400" height="300">
			<p class="redText">Your browser does not support the canvas tag.</p>
		</canvas>
	</section>
	<section>
		<h1>canvas - radial gradient</h1>
		<p>radial gradient from one large black circle and one small red circle</p>
		<p>this does not work as intended if using Opera and it is very slow if using IE9</p>
		<p class="redText">moving midpoint of red circle by moving mouse ↓ (the black circle is centered in canvas)</p>
		<canvas id="canvas3" width="400" height="300">
			<p class="redText">Your browser does not support the canvas tag.</p>
		</canvas>
		<p class="redText">moving both midpoints by moving mouse ↓</p>
		<canvas id="canvas4" width="400" height="300">
			<p class="redText">Your browser does not support the canvas tag.</p>
		</canvas>
		<p class="redText">moving midpoint of black circle by moving mouse ↓ (the red circle is centered in canvas)</p>
		<canvas id="canvas5" width="400" height="300">
			<p class="redText">Your browser does not support the canvas tag.</p>
		</canvas>
	</section>
	<section>
		<h1>slider</h1>
			<p>a slider is displayed if using Chrome, Safari, Opera</p>
			<p>the slider changes the radius of the black circle making up the radial gradiant above</p>
			<input type="range" id="slider" min="0" max="400" step="1" value="100">
			<div id="displayValue">black radius = 100</div>
	</section>
	<section>
		<h1>figure</h1>
		<p>the explanatory text within figcaption tags</p>
		<figure>
			<img src="images/invertedMandelbrot.png" alt="Inverted Mandelbrot set">
			<figcaption>Inverted Mandelbrot set. The coloring is made after the argument, instead of the escape time.</figcaption>
		</figure>
	</section>
	<section>
		<h1>color picker</h1>
		<p>a color picker is displayed in Opera (the Macintosh "pick any color anywhere" works as well)</p>
		<p>if not Opera, try #780000 in the input bar, then enter</p>
		<input type="color" id="colorPicker">
		<p>↓</p>
		<div id="displayColor"><b>the chosen colour</b></div>
	</section>
	<section>
		<h1>inverted drawing</h1>
		<p>drag mouse to draw filled inverted rectangles</p>
		<canvas id="canvas6" width="400" height="300">
			<p class="redText">Your browser does not support the canvas tag.</p>	
		</canvas>
		<ul>
			<li><a href="http://dev.opera.com/articles/view/html-5-canvas-the-basics/">
				Dev.Opera (follow the standards...break the rules): HTML5 canvas - the basics</a></li>
		</ul>
		<p>drag mouse to draw filled inverted squares</p>
		<canvas id="canvas7" width="400" height="300">
			<p class="redText">Your browser does not support the canvas tag.</p>	
		</canvas>
	</section>
	<section>
		<h1>rubber band squares</h1>
		<p>drag mouse to draw one square</p>
		<p>(by double-clicking fast one might get two squares or more)</p>
		<canvas id="canvas8" width="400" height="300">
			<p class="redText">Your browser does not support the canvas tag.</p>	
		</canvas>
	</section>
	<section>
		<h1>testing your browser</h1>
		<ul>
			<li><a href="http://html5test.com/">THE HTML5 TEST</a></li>
			<li><a href="http://findmebyip.com/litmus">CSS3 Properties</a></li>
		</ul>
	</section>
	<section>
		<h1>this is just too much</h1>
		<p>...for one page</p>
		<ul>
			<li class="menu">testing html5</li>
			<li class="menu"><a href="continuedTesting.html">continued testing of html5</a></li>
			<li class="menu"><a href="http://www.malinc.se/testinghtml5/mandelbrotUsingHtml5.html">the Mandelbrot set using html5</a></li>
			<li class="menu"><a href="http://www.malinc.se/testinghtml5/juliaUsingHtml5.html">Julia sets using html5</a></li>
			<li class="menu"><a href="http://www.malinc.se/testinghtml5/juliaAnimationHtml5.html">Julia set animation using html5</a></li>
		</ul>
	</section>
	<footer>
	 	<p><a href="http://validator.w3.org/check?uri=referer">validate  HTML5</a> &nbsp; 
	 		&nbsp; <a href="mailto:[email protected]">2011 Malin Christersson</a> &nbsp; &nbsp; 
	 		<a href="http://creativecommons.org/licenses/by-nc-sa/3.0/" rel="license">CC BY-NC-SA</a></p>
	</footer>

</body></html>