Javascript 如何以100%的页面宽度打印画布图像？

我的项目需要打印出一个画布图像，可以小于或大于页面宽度。如果画布图像小于页面宽度，我希望打印输出保持画布大小，如果画布图像大于页面宽度，则保持缩放。我如何做到这一点

下面是画布图像对于打印页面来说太大的示例（需要缩小以适应）：

var canvas=document.getElementById（“canvas1”）；
var ctx=canvas.getContext（“2d”）；
ctx.fillStyle=“蓝色”；
ctx.fillRect（0，0，canvas.width，canvas.height）
html{高度：100%；溢出：隐藏；}
#主容器{高度：100%；填充：；边距：0；
显示器：flex；
弯曲方向：立柱；
}
正文{高度：100%；填充：0；边距：0；
显示器：flex；
弯曲方向：立柱；
}
标题{
背景：水；
flex:0100px；
}
第{节背景：蓝色；
弹性：1；
显示器：flex；
弯曲方向：行；
溢出：自动；
}
文章{
背景：白杏仁；
弹性：3；
}
导航{
背景：珊瑚；
弹性：1；
顺序：-1；
/*启动flex设置*/
显示器：flex；
弯曲方向：立柱；
证明内容：之间的空间；
-webkit证明内容：之间的空间；
/*末端弯曲设置*/
}
.导航底部集装箱{
显示器：flex；
弯曲方向：行；
柔性包装：nowrap；
调整项目：灵活启动；
}
.导航项目顶部{
溢出y：自动；
}
.导航底部项目左{
背景：深粉色；
顺序：1；
边框颜色：红色；
边框样式：实心；
柔性生长：1；
光标：指针；
文本对齐：居中；
}
.导航底部项目右侧{
背景：道奇蓝；
顺序：0；
边框颜色：蓝色；
边框样式：实心；
柔性生长：1；
光标：指针；
文本对齐：居中；
}
除{背景：#ddd；
flex:00200px；
}
页脚{背景：#888；
flex:0100px；
}
.项目案文{
字体大小：1vmax；
填充：1em；
}
画布{边框：1px纯黑；}
#容器{
显示：flex；/*建立flex容器*/
弯曲方向：柱；/*使主轴垂直*/
对齐内容：居中；/*在本例中，垂直居中项目*/
对齐项目：居中；/*在本例中，水平居中项目*/
光标：移动；
}
.只打印这个{
}
@媒体印刷品{
html，
身体{
身高：100%；
溢出：隐藏；
显示：块；
背景颜色：黄色；
}
.只打印这个{
背景颜色：黄色；
/*
身高：100%；
宽度：100%；
位置：固定*/
排名：0；
左：0；
保证金：0；
}
.没有印刷品，
.不打印*{
显示：无！重要；
}
.printOnly{
显示：块；
}
}

收缩画布以适合打印页面
固定高度标题打印画布
样品
示例这是一个更长的示例文本，在这里和那里进行了一些讨论。
这是线的尽头，也是宇宙的尽头。
正当
左边
正当
左边
在您的打印样式中，您可以将
溢出：隐藏
添加到
中。仅打印此
并将其添加到
画布中
：

.print-this-only canvas {
    max-width:100%;
    max-height: 100%;
    display: block;
}

现在可以约束
画布
。请注意，对于画布中的第三个图像，您有
left:1700px
（对于下面的演示，将其更改为
right:0
）——这些图像的位置值需要以百分比表示，以便进行适当的缩放


var canvas=document.getElementById（“canvas1”）；
var ctx=canvas.getContext（“2d”）；
ctx.fillStyle=“蓝色”；
ctx.fillRect（0，0，canvas.width，canvas.height）
html{
身高：100%；
溢出：隐藏；
}
#主容器{
身高：100%；
填充：；
保证金：0；
显示器：flex；
弯曲方向：立柱；
}
身体{
身高：100%；
填充：0；
保证金：0；
显示器：flex；
弯曲方向：立柱；
}
标题{
背景：水；
flex:0100px；
}
部分{
背景：蓝色；
弹性：1；
显示器：flex；
弯曲方向：行；
溢出：自动；
}
文章{
背景：白杏仁；
弹性：3；
}
导航{
背景：珊瑚；
弹性：1；
顺序：-1；
/*启动flex设置*/
显示器：flex；
弯曲方向：立柱；
证明内容：之间的空间；
-webkit证明内容：之间的空间；
/*末端弯曲设置*/
}
.导航底部集装箱{
显示器：flex；
弯曲方向：行；
柔性包装：nowrap；
调整项目：灵活启动；
}
.导航项目顶部{
溢出y：自动；
}
.导航底部项目左{
背景：深粉色；
顺序：1；
边框颜色：红色；
边框样式：实心；
柔性生长：1；
光标：指针；
文本对齐：居中；
}
.导航底部项目右侧{
背景：道奇蓝；
顺序：0；
边框颜色：蓝色；
边框样式：实心；
柔性生长：1；
光标：指针；
文本对齐：居中；
}
旁白{
背景：ddd；
flex:00200px；
}
页脚{
背景：#888；
flex:0100px；
}
.项目案文{
字体大小：1vmax；
填充：1em；
}
帆布{
边框：1px纯黑；
}
#容器{
显示器：flex；
/*建立flex容器*/
弯曲方向：立柱；
/*使主轴垂直*/
证明内容：中心；
/*在本例中，将项目垂直居中*/
对齐项目：居中；
/*在本例中，将项目水平居中*/
光标：移动；
}
.仅打印此{}
@媒体印刷品{
html，
身体{
身高：100%；
宽度：100%；
保证金：0；
溢出：隐藏；
显示：块；
背景颜色：黄色；
}
.只打印这个{
背景颜色：黄色；
排名：0；
左：0；
保证金：0；
溢出：隐藏；
/*增加*/
}
/*增加*/
.只打印这张画布{
最大宽度：100%；
最大高度：100%；
显示：块；
}
.没有印刷品，
.不打印*{
显示：无！重要；
}
.printOnly{
显示：块；
}
}

收缩画布以适合打印页面
固定高度标题打印C
<div class="canvas_container">
    <canvas height="1000px" width="2000px" id="canvas1"></canvas>
</div>

@media print {
    #container {
        display: block; /* Cannot be flex here */
    }
    .canvas_container {
        max-width: 100%;
        padding-bottom: 50%; /* Canvas is 2000x1000, this will set the height to 50% of width */
        position: relative;
    }
    canvas{
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        width: 100%;
    }
}

<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%;
    "
/>