Canvas 画对角线

这就是我想要的：一个页面被分成两个垂直部分：一个红色部分，内容（小提琴中的200px）+右侧部分是一条对角线，从浏览器窗口的左上角（200，0）到右下角

我希望这一行能够对任何页面更改做出响应：每次调整页面大小时，这一行在这些点之间始终是一条整齐的对角线。（200，0-浏览器窗口右下角）

我一直在尝试管理canvas函数，但可能是错误的方法。 有人能帮我吗

[http://jsfiddle.net/ropvw3jm/3/][1]

---

这样就可以了，请查看评论以获取信息：

//获取要绘制的画布和上下文
var canvas=document.getElementById（'canvas'）；
var context=canvas.getContext（'2d'）；
函数对角线ToBottomRight（）{
//将画布重置为窗口大小-这也会清除画布
canvas.width=window.innerWidth；
canvas.height=window.innerHeight；
//设置线条颜色
context.strokeStyle='red'；
//设置线的起点
context.moveTo（200,0）；
//画一条线到下角
lineTo（window.innerWidth，window.innerHeight）；
//实际将像素绘制到画布上
stroke（）；
}
//设置窗口大小更改时要执行的函数
window.addEventListener（'resize'，对角线到底部，false）；
//在初始加载时执行该函数
对角线到底部右（）
这正是我想要的。现在我只需要在宽度小于宽度时关闭它。非常感谢。