abadon,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
*{
margin: 0;
padding: 0;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
var width=document.documentElement.clientWidth - 2 ; // ширина
var height=document.documentElement.clientHeight - 4; // высота
var max_width=800; // максимальная ширина
var canvas1 = $('<canvas/>', { id: 'canv', attr : {height, width}});
$('body').append(canvas1); // создание канваса
var canvas = canvas1[0];
var ctx = canvas.getContext("2d");
ctx.fillStyle = "green";
width = Math.min(max_width, width);
var pleft = (canvas.width - width)/2;
ctx.fillRect(pleft, 0, width, 100); // рисование квадрата
});
</script>
</head>
<body>
</body>
</html>