<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Exercise 010 Drawing in Canvas</title>
</head>
<body>
<canvas id="myCanvas" width="1345.5" height="603.5"
style="border:1px solid #000000;">
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.globalAlpha = 0.8
ctx.fillStyle = "#ffd500";
ctx.fillRect(500,110,283,353);
ctx.fillStyle = "#ff6200";
ctx.fillRect(520,128,230,300);
ctx.fillStyle = "#00aeff";
ctx.beginPath();
ctx.arc(580,190,50,0,2*Math.PI);
ctx.fill();
ctx.fillStyle = "#fffde3";
ctx.beginPath();
ctx.arc(580,190,40,0,2*Math.PI);
ctx.fill();
ctx.fillStyle = "#00c27b";
ctx.beginPath();
ctx.arc(580,190,30,0,2*Math.PI);
ctx.fill();
ctx.fillStyle = "#108a00";
ctx.fillRect(715,128,50,315);
ctx.fillStyle = "#f00000";
ctx.fillRect(520,393,245,50);
ctx.fillStyle = "#0a00cf";
ctx.fillRect(520,403,245,10);
ctx.fillStyle = "#8300e0";
ctx.fillRect(707,128,3,315);
ctx.fillStyle = "#0a00cf";
ctx.fillRect(520,393,245,5);
ctx.fillStyle = "#8300e0";
ctx.fillRect(715,128,5,315);
ctx.fillStyle = "#0a00cf";
ctx.fillRect(520,385,245,3);
ctx.fillStyle = "#8300e0";
ctx.fillRect(725,128,10,315);
</script>
</body>
</html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Exercise 010 Drawing in Canvas</title>
</head>
<body>
<canvas id="myCanvas" width="1345.5" height="603.5"
style="border:1px solid #000000;">
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.globalAlpha = 0.8
ctx.fillStyle = "#ffd500";
ctx.fillRect(500,110,283,353);
ctx.fillStyle = "#ff6200";
ctx.fillRect(520,128,230,300);
ctx.fillStyle = "#00aeff";
ctx.beginPath();
ctx.arc(580,190,50,0,2*Math.PI);
ctx.fill();
ctx.fillStyle = "#fffde3";
ctx.beginPath();
ctx.arc(580,190,40,0,2*Math.PI);
ctx.fill();
ctx.fillStyle = "#00c27b";
ctx.beginPath();
ctx.arc(580,190,30,0,2*Math.PI);
ctx.fill();
ctx.fillStyle = "#108a00";
ctx.fillRect(715,128,50,315);
ctx.fillStyle = "#f00000";
ctx.fillRect(520,393,245,50);
ctx.fillStyle = "#0a00cf";
ctx.fillRect(520,403,245,10);
ctx.fillStyle = "#8300e0";
ctx.fillRect(707,128,3,315);
ctx.fillStyle = "#0a00cf";
ctx.fillRect(520,393,245,5);
ctx.fillStyle = "#8300e0";
ctx.fillRect(715,128,5,315);
ctx.fillStyle = "#0a00cf";
ctx.fillRect(520,385,245,3);
ctx.fillStyle = "#8300e0";
ctx.fillRect(725,128,10,315);
</script>
</body>
</html>