Using p5.js this snippet creates a stickman and a background on a canvas inside of an HTML page! To see the website just click run while inside of the run tab.
let p5js = `
function setup() {
createCanvas(2000, 1000)
}
//This is where you start making the p5 objects
function draw() {
textSize(20);
textStyle(NORMAL);
text('This website is using p5.js to make shapes!', 50, 50);
text('p5.js is a library that basically lets you draw things and put them on HTML sites using js', 50, 80);
text('This is a stickman with a background:', 50, 110);
//Background
fill(128, 176, 255);
rect(20, 150, 1000, 500);
//Grass
fill(5, 153, 0);
rect(20, 500, 1000, 150);
//Sun
fill(228, 240, 0)
circle(800, 220, 100)
//Legs
line(50, 500, 75, 400);
line(100, 500, 75, 400);
//Body
line(75, 400, 75, 250);
//Arms
line(75, 300, 100, 400);
line(75, 300, 50, 400);
//Head
fill(255, 183, 120);
circle(75, 250, 75);
//Eyes and mouth
fill(255, 255, 255);
circle(60, 240, 20);
circle(90, 240, 20);
fill(0, 0, 0);
circle(58, 242, 5);
circle(88, 242, 5);
ellipse(75, 270, 20, 30);
//House
fill(112, 69, 30);
rect(400, 300, 300, 200);
fill(156, 109, 67);
triangle(375, 300, 550, 200, 725, 300);
rect(450, 450, 30, 50);
fill(227, 219, 70);
circle(457, 480, 10);
fill(0, 0, 0);
text('This page only uses shapes, which only peaks the surface of what you can do with p5. The p5 library is awesome because of how much you can do with it, you can try some of this on your own by reading the p5.js docs: https://p5js.org/', 50, 520, 700, 1000);
}
`;
let bodyHtml = `
p5
`;
return {
statusCode: 200,
headers: {'Content-Type': 'text/html'},
body: Buffer.from(bodyHtml),
};