Web - 4 - 4

const WIDTH = 720
const HEIGHT = 480

const canvas = document.querySelector('#game')
canvas.width = WIDTH
canvas.height = HEIGHT

const ctx = canvas.getContext('2d')

ctx.fillStyle = 'white'
ctx.fillRect(0, 0, WIDTH, HEIGHT)

// purple rectangle
ctx.fillStyle = 'purple'
ctx.fillRect(450, 50, 200, 200)

// grey ellipse
ctx.fillStyle = '#333333'
ctx.beginPath()
ctx.ellipse(350, 350, 50, 75, 45 * Math.PI / 180, 0, 2 * Math.PI)
ctx.fill()

// red arc
ctx.strokeStyle = 'red'
ctx.beginPath()
ctx.arc(200, 75, 50, 0, 2 * Math.PI)
ctx.stroke()

// blue freeform shape
ctx.strokeStyle = 'blue'
ctx.lineWidth = 5
ctx.beginPath()
ctx.moveTo(100, 150)
ctx.lineTo(100, 250)
ctx.arc(200, 300, 50, 1.5 * Math.PI, 0)
ctx.lineTo(100, 400)
ctx.closePath()
ctx.stroke()

// head
ctx.strokeStyle= '#FFA000'
ctx.beginPath()
ctx.arc(600, 350, 75, 0, 2 * Math.PI, false)
ctx.lineWidth = 5
ctx.stroke()

// eyes
ctx.fillStyle = '#FFA000'
ctx.beginPath()
ctx.arc(570, 330, 10, 0, 2 * Math.PI, false)
ctx.arc(630, 330, 10, 0, 2 * Math.PI, false)
ctx.fill()

// mouth
ctx.strokeStyle= '#FFA000'
ctx.beginPath()
ctx.arc(600, 360, 50, 0, Math.PI, false)
ctx.stroke()