使用drawImage方法在Canvas上绘制Canvas无显示的问题排查

问题 #

我设置了drawImage方法的参数，想要显示绘制了四个方块的Canvas的中间区域，但页面无任何内容显示，请问这是为什么？

我的代码如下：

<canvas id="canvas" width="200" height="200"></canvas>

<script>
const network = document.createElement('canvas')
const ctx_network = network.getContext('2d');
ctx_network.fillStyle = 'red';
ctx_network.fillRect(0, 0, 250, 250);
ctx_network.fillStyle = 'green';
ctx_network.fillRect(250, 250, 250, 250);
ctx_network.fillStyle = 'aqua';
ctx_network.fillRect(0, 250, 250, 250);
ctx_network.fillStyle = 'violet';
ctx_network.fillRect(250, 0, 250, 250);

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.drawImage(network, 200, 200, 200, 200, 0, 0, 200, 200);
</script>

原因分析 #

• 动态创建的network画布未设置宽高属性，默认尺寸为300x150像素，而你绘制的方块范围最大到了500x500，超出默认尺寸的部分会被直接裁剪，根本不存在于画布上。
• 你用drawImage指定的源区域是从(200,200)开始取200x200，但network默认高度仅150，这个起始位置已经超出画布有效范围，自然取不到任何像素，页面显示为空。

解决办法 #

1. 给动态创建的network画布设置匹配绘制范围的宽高：

const network = document.createElement('canvas')
// 设置画布宽高为500x500，覆盖四个方块的全部区域
network.width = 500;
network.height = 500;
const ctx_network = network.getContext('2d');
// 后续绘制代码保持不变

2. 调整drawImage的源区域参数，确保取到真正的中间区域。比如四个方块分布在500x500画布的四个角，中间200x200区域的起始位置应为(150,150)：

ctx.drawImage(network, 150, 150, 200, 200, 0, 0, 200, 200);

内容的提问来源于stack exchange，提问作者user20478727