我正在研究如何仅使用JavaScript绘制形状的示例代码。我试图在JSFiddle.net中测试这个示例代码，虽然点击"Run"不会产生任何错误，但结果完全是空白的。
有人知道如何让一些东西真正出现在JsFiddle.net的屏幕上吗？
draw = function() {
//sky
background(172, 238, 247);
//ground
fill(95, 156, 83);
rect(0, 350, 400, 50);
};
draw();
链接到非工作Fiddle：https://jsfiddle.net/skdopL1b/
因此javascript使用HTML绘制事物的方式是通过Canvas API。首先，您必须对JS代码和<canvas>元素进行上下文化并建立交互。这是通过内置函数完成的，然后再添加一点代码，使其变得简单。
<html>
<canvas id="canvas" width="500" height="400"></canvas>
<script>
const c = document.getElementById("canvas"); //Grab canvas element to use as object
const ctx = c.getContext('2d'); //Function that enable the 2d functions of Canvas API
ctx.fillRect(0,0,10,10) //Example of ctx function
<script>
</html>
从你给我们的JS Fiddle中，看起来你可能复制了预先建立这些函数的视频中的函数，因为它们不是普通的画布函数，而是自定义函数。我可以向您展示如何编写其中一个自定义函数的示例
function background(red,green,blue) {
ctx.fillStyle = 'rgb('+red+','+green+','+blue+')';;
ctx.fillRect(0,0,c.width,c.height); //Makes a rectangle the size of the canvas
}
background(172,238,247); //Creates a canvas sized rectangle with rgb(172,238,247)
您必须找到他的函数声明，或者编写自己的函数(或者只使用原始的canvas函数(来以这种方式使用javascript。你还需要定义一个带有ID的画布元素。幸运的是，我正在制作一个适合你的JSFiddle，因为你似乎对整个HTML5/JS还很陌生。
-------编辑-------
这是你的小提琴链接朋友，我的评论可以帮助你理解一切https://jsfiddle.net/xwqg1cez/2/