I tried to make this as a background image. Where Mickey mouse is the main focus with circles to make it look pretty. This was by far my least favorite assignment.
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
context.beginPath();
context.arc(250, 450, 100, 0, 2*Math.PI, false);
context.fillStyle = 'rgb(0, 0 ,0)';
context.fill();
context.beginPath();
context.arc(150,375, 50, 0, 2*Math.PI, false);
context.fillStyle = 'rgb(0, 0 ,0)';
context.fill();
context.beginPath();
context.arc(350,375, 50, 0, 2*Math.PI, false);
context.fillStyle = 'rgb(0, 0 ,0)';
context.fill();
context.beginPath();
context.arc(150,100, 50, 0, 2*Math.PI, false);
context.fillStyle = 'rgb(225, 225 ,0)';
context.fill();
context.beginPath();
context.arc(300,200, 50, 0, 2*Math.PI, false);
context.fillStyle = 'rgb(225, 225 ,0)';
context.fill();
context.beginPath();
context.arc(400,215, 50, 0, 2*Math.PI, false);
context.fillStyle = 'rgb(225, 225 ,0)';
context.fill();
context.beginPath();
context.arc(100,200, 50, 0, 2*Math.PI, false);
context.fillStyle = 'rgb(325, 225 ,0)';
context.fill();
context.beginPath();
context.arc(450,100, 50, 0, 2*Math.PI, false);
context.fillStyle = 'rgb(425, 225 ,0)';
context.fill();
context.beginPath();
context.moveTo(150,300);
context.bezierCurveTo(250,50,500,550,650,300);
context.strokeStyle= 'rgba(0,0,0)';
context.stroke();
context.beginPath();
context.arc(100,550, 50, 0, 2*Math.PI, false);
context.fillStyle = 'rgb(350, 350 ,0)';
context.fill();
