width:100%;
height:100%;
<div id="square">
<canvas id="canvas"></canvas>
<div>
<script>
$("#square").height($("#square").width());
$(window).resize(function () {
$("#square").height($("#square").width());
});
</script>
window.onload = function () {
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
window.addEventListener('resize', resizeCanvas, false);
function resizeCanvas() {
var square = document.getElementById("square");
canvas.width = parseInt(square.style.height);
canvas.height = parseInt(square.style.height);
drawStuff();
}
resizeCanvas();
function drawStuff() {
context.beginPath();
context.moveTo(0, 0);
var x = 200,
y = 200;
// context.lineTo(100, 300);
// context.lineTo(200, 100);
// context.lineTo(300, 300);
// context.lineTo(400, 100);
for (var i = 1; i < 4; i++) {
x += 15;
context.lineTo(x, y);
y += 15;
context.lineTo(x, y);
}
context.stroke();
}
};