如何在HTML5画布中强制将线条渲染到其他对象的后面

<canvas id="myCanvas" width="500" height="500"></canvas>

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.moveTo(x1, y1); // 设置线条起点坐标
ctx.lineTo(x2, y2); // 设置线条终点坐标
ctx.lineWidth = 2; // 设置线条宽度
ctx.strokeStyle = "red"; // 设置线条颜色
ctx.stroke(); // 绘制线条

// 绘制其他对象的代码