To achieve this effect, one method is to enclose the canvas within a container and then calculate all dimensions as percentages of the parent element width. First, in the HTML:
<div class="canvas_container">
<canvas height="1000px" width="2000px" id="canvas1"></canvas>
</div>
Next, add the following CSS rules:
@media print {
#container {
display: block; /* Flexbox cannot be used here */
}
.canvas_container {
max-width: 100%;
padding-bottom: 50%; /* Height set to 50% of the width for a canvas size of 2000x1000 */
position: relative;
}
canvas{
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 100%;
}
}
Adjust the positioning and sizing of each image using percentage values:
<img src="http://s.cdpn.io/3/kiwi.svg"
style="
position: absolute;
left: 0;
top: 0;
z-index: 2;
width: 5%;
"
/>
<img src="http://s.cdpn.io/3/kiwi.svg"
style="
position: absolute;
left: 7%;
top: 0;
z-index: 2;
width: 5%;
"
/>
<img src="http://s.cdpn.io/3/kiwi.svg"
style="
position: absolute;
left: 85%;
top: 15%;
z-index: 2;
width: 5%;
"
/>
Complete code snippet provided below:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title> Shrink Canvas to Fit Printed Page </title>
<!-- CSS styles -->
<style>
/* CSS styling goes here */
</style>
</head>
<body ng-app="ui.bootstrap.demo" ng-controller="DropdownController as vm">
<div id="main-container">
<header class="no-print">fixed height header
<button onclick="window.print();" class="no-print">Print Canvas</button>
</header>
<section>
<article id="id">
<div id="container">
<div id="container" class="print-this-only" style="position:relative">
<div class="canvas_container">
<canvas height="1000px" width="2000px" id="canvas1"></canvas>
</div>
<img src="http://s.cdpn.io/3/kiwi.svg" style="
position: absolute;
left: 0;
top: 0;
z-index: 2;
width: 5%;
" />
<img src="http://s.cdpn.io/3/kiwi.svg" style="
position: absolute;
left: 7%;
top: 0;
z-index: 2;
width: 5%;
" />
<img src="http://s.cdpn.io/3/kiwi.svg" style="
position: absolute;
left: 85%;
top: 15%;
z-index: 2;
width: 5%;
" />
</div>
</article>
<nav class="no-print">
<!-- Navigation content goes here -->
</nav>
</section>
<script>
var canvas = document.getElementById("canvas1");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, canvas.width, canvas.height);
</script>
</div>
</body>
</html>