draw.html

<style>
*{overflow:hidden;
margin:0px;
padding:0px;}

#myCanvas{
margin:0px;
padding:0px;
width:100%;
height:100%;
overflow-y:hidden;
}
</style>

<canvas id="myCanvas"  height="2250px" width="4000px" >

<script >

window.switch=0;
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
X=0;
Y=0;
document.getElementById("myCanvas").addEventListener("mousedown",function(){X=0;Y=0;window.switch=0;document.onmousemove=Mpos});


function Mpos(e) {
if(window.switch==0)
{
    x= e.pageX
    y = e.pageY
	if(!X)
	{
	X=x;
	}
		if(!Y)
	{
	Y=y;
	}
 ctx.beginPath();
ctx.moveTo(4000/document.body.clientWidth*X,2250/document.body.clientHeight*Y);
ctx.lineTo(4000/document.body.clientWidth*x,2250/document.body.clientHeight*y);
ctx.strokeStyle="rgb("+Math.round(Math.random()*1000%255)+","+Math.round(Math.random()*1000%255)+","+Math.round(Math.random()*1000%255)+")";
ctx.lineWidth=(Math.round(Math.random()*100%50+1));
ctx.stroke();
X=x;
Y=y;
}
}
document.getElementById("myCanvas").addEventListener("mouseup",function(){window.switch=1;})
alert(document.body.clientWidth);

</script>