function draw() { var canvas = document.getElementById("canvas"); canvas.width = 800; canvas.height = 800; var context = canvas.getContext("2d"); // fillReact(x, y, width, height); context.fillStyle = "blue"; context.fillRect(10,10, 100, 200); context.fillStyle = "rgba(0, 0, 200, 0.5)"; context.fillRect (30, 30, 200, 500); } function triangle() { var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); canvas.width = 400; canvas.height = 400; context.beginPath(); context.moveTo(75, 50); context.lineTo(100, 75); context.stroke(); context.lineTo(100, 25); context.stroke(); context.lineTo(75, 50); context.stroke(); context.fill(); context.closePath(); context.beginPath(); context.moveTo(200, 50); context.lineTo(150, 100); context.stroke(); context.lineTo(250, 100); context.stroke(); context.lineTo(200, 50); context.stroke(); context.fill(); } function pyramid() { var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); canvas.width = 400; canvas.height = 400; context.beginPath(); context.moveTo(200, 0); context.lineTo(0, 400); context.stroke(); context.lineTo(400, 400); context.stroke(); context.lineTo(200, 0); context.stroke(); context.fillStyle = "orange"; context.fill(); } function initials() { var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); canvas.width = 500; canvas.height = 500; context.beginPath(); context.moveTo(20, 0); context.lineTo(0, 50); context.stroke(); context.moveTo(20, 0); context.lineTo(40, 50); context.stroke(); context.moveTo(10, 25); context.lineTo(30, 25); context.stroke(); } function smileyFaceEmoji() { var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); canvas.width = 500; canvas.height = 500; context.beginPath(); context.arc(250, 250, 100,0,Math.PI*2, true); context.moveTo(235, 225); context.arc(225, 225, 10, 0, Math.PI*2, true); context.moveTo(285, 225); context.arc(275, 225, 10, 0, Math.PI*2, true); context.moveTo(250, 275); context.arc(250, 275, 50, 0, Math.PI, false); context.moveTo(250, 275); context.lineTo(200, 275); context.stroke(); } window.onload = smileyFaceEmoji();