<!doctype html>
<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.8),rgba(0,0,0,0.2)),url("https://img3.stockfresh.com/files/t/tashatuvango/m/32/3971276_stock-photo-green-grass-seamless-tileable-texture.jpg");
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)">
<canvas id="can1"></canvas>
<div id="div1"></div>
<script>
var ww=window.innerWidth;
var wh=wh=window.innerHeight;
var mx=ww/2;
var my=wh/2;
var can1=document.getElementById("can1");
var ctx=can1.getContext("2d");
var div1=document.getElementById("div1");
var col1="rgba("+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+",0.3)";
var sx=0;
var sy=0;
can1.width=ww;
can1.height=wh;
div1.innerHTML="window width: "+ww+" height: "+wh+"<br>color: "+col1;
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 drawCanvas(){
ctx.fillRect(0,0,100,100);
}
drawCanvas();
</script>
</body>
</html>
