Javascript 制作模糊形状的HTML画布

我想用HTML制作简单的形状。 但是形状必须是大的。 画布是全屏的

例如：

代码：

无标题文件
*{边距：0；填充：0；}
正文，html{高度：100%；}
#帆布{
位置：绝对位置；
宽度：100%；
身高：100%；
}
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
ctx.fillStyle=“#000”；
var w=画布宽度；
var h=画布高度；
ctx.fillRect（0,0，w，h）；
ctx.fillStyle=“#fff”；
ctx.beginPath（）；
var a=w/2；
var b=0；
弧（a，b，20，0，数学π，假）；
ctx.closePath（）；
ctx.fill（）；
ctx.stroke（）；
ctx.beginPath（）；
ctx.fillStyle=“红色”；
ctx.fillRect（0,0,10100）；
ctx.stroke（）；
ctx.save（）；
ctx.translate（240120）；
ctx.rotate（Math.PI/4）；//45度
ctx.fillStyle=“黄色”；
ctx.fillRect（-40，-40,20,20）；
ctx.restore（）；

---

请修复它。

不要通过CSS设置画布的大小，CSS会拉伸画布元素，而不是实际使画布变大

请改用HTML属性：

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

如果要在调整窗口大小时调整画布大小，我建议您查看

。您可以删除

#canvas

css类。该类可能重复

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

var canvas = document.getElementById("canvas");
canvas.width  = window.innerWidth;
canvas.height = window.innerHeight;
var ctx=canvas.getContext("2d");
// etc...