<html lang="fr">
<head>
<meta charset="utf-8">
<title>Interesting Title</title>
<link rel="icon" href="https://image.flaticon.com/icons/png/512/71/71339.png" type="image/png">
<style>
html,body{
height:100%
}
html,body,div,canvas,svg {
margin:0;
padding:0;
}
body{
font-family:sans-serif;
background-image:linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.1)),url("https://www.transparenttextures.com/patterns/concrete-wall.png");
overflow:hidden;
}
#div1{
position:fixed;
top:0;
right:0;
background-color:rgba(0,0,0,0.5);
color:#fff;
padding:10px 20px;
text-align:right;
}
#svg1{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:-1;
}
</style>
</head>
<body onmousemove="coor1(event)">
<svg id="svg1"></svg>
<canvas id="can1"></canvas>
<div id="div1"></div>
<script>
var ww,wh,mx,my;
var can1=document.getElementById("can1");
var ctx=can1.getContext("2d");
var div1=document.getElementById("div1");
var svg1=document.getElementById("svg1");
var cir1=document.createElementNS("http://www.w3.org/2000/svg","circle");
var col1="rgba("+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+",0.3)";
window.addEventListener("resize",canwh);
function canwh(){
ww=window.innerWidth;
wh=window.innerHeight;
can1.width=ww;
can1.height=wh;
div1.innerHTML="window width: "+ww+" height: "+wh+"<br>color: "+col1;
drawSvg();
drawCanvas();
}
function coor1(event){
mx=event.pageX;
my=event.pageY;
div1.innerHTML="window width: "+ww+" height: "+wh+"<br>color: "+col1+"<br>mouse x: "+mx+" y: "+my;
}
function drawSvg(){
cir1.setAttribute("cx",ww/2);
cir1.setAttribute("cy",wh/2);
cir1.setAttribute("r",ww/8);
cir1.style.fill=col1;
svg1.appendChild(cir1);
}
function drawCanvas(){
ctx.clearRect(0,0,ww,wh);
ctx.beginPath();
ctx.arc(ww/2, wh/2,ww/16,0,2*Math.PI,false);
ctx.fillStyle="rgba(0,0,0,1)";
ctx.fill();
}
canwh();
drawSvg();
drawCanvas();
</script>
</body>
</html>
