Practice - Characters - Grumpy
Step 1
Step 2
Step 3 - Final
CODE:
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start here
//// BKGD
context.beginPath();
context.rect(0,0,canvas.width, canvas.height);
context.fillStyle = "pink";
context.fill();
/////////////////////// ARC = FRAGMENT OF A CIRCLE
//////////////head
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(410, 380, 300, 0*Math.PI, 2*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "green";
context.fill();
///////////////////// mouth
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(410, 550, 100, 2*Math.PI, 0*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "black";
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(410, 590, 50, 2*Math.PI, 0*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "red";
context.fill();
//////nose
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(400, 380, 100, 1.25*Math.PI, 1.75*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "orange";
context.fill();
//right
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(550, 300, 100, 2*Math.PI, 0*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "white";
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(550, 300, 50, 2*Math.PI, 0*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "black";
context.fill();
//left
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(270, 300, 100, 2*Math.PI, 0*Math.PI, false);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "white";
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(270, 300, 50, 2*Math.PI, 0*Math.PI, false);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "black";
context.fill();
///////right eyebrow
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(548, 291, 100, 1.75*Math.PI, 1.05*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "blue";
context.fill();
/////left eyebrow
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(270, 290, 100, 1.95*Math.PI, 1.25*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "blue";
context.fill();
////////////////////////////////////// end here
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="800"></canvas>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start here
//// BKGD
context.beginPath();
context.rect(0,0,canvas.width, canvas.height);
context.fillStyle = "pink";
context.fill();
/////////////////////// ARC = FRAGMENT OF A CIRCLE
//////////////head
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(410, 380, 300, 0*Math.PI, 2*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "green";
context.fill();
///////////////////// mouth
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(410, 550, 100, 2*Math.PI, 0*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "black";
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(410, 590, 50, 2*Math.PI, 0*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "red";
context.fill();
//////nose
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(400, 380, 100, 1.25*Math.PI, 1.75*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "orange";
context.fill();
//right
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(550, 300, 100, 2*Math.PI, 0*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "white";
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(550, 300, 50, 2*Math.PI, 0*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "black";
context.fill();
//left
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(270, 300, 100, 2*Math.PI, 0*Math.PI, false);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "white";
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(270, 300, 50, 2*Math.PI, 0*Math.PI, false);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "black";
context.fill();
///////right eyebrow
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(548, 291, 100, 1.75*Math.PI, 1.05*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "blue";
context.fill();
/////left eyebrow
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(270, 290, 100, 1.95*Math.PI, 1.25*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "blue";
context.fill();
////////////////////////////////////// end here
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="800"></canvas>
</body>
</html>
Practice - Circles
CODE:
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start here
//// BKGD
context.beginPath();
context.rect(0,0,canvas.width, canvas.height);
context.fillStyle = "yellow";
context.fill();
context.beginPath();
context.arc(410, 380, 300, 0*Math.PI, 2*Math.PI, true);
context.lineWidth = 15;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "red";
context.fill();
context.beginPath();
context.arc(410, 380, 250, 0*Math.PI, 2*Math.PI, true);
context.lineWidth = 15;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "purple";
context.fill();
context.beginPath();
context.arc(410, 380, 200, 0*Math.PI, 2*Math.PI, true);
context.lineWidth = 15;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "blue";
context.fill();
context.beginPath();
context.arc(410, 380, 150, 0*Math.PI, 2*Math.PI, true);
context.lineWidth = 15;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "green";
context.fill();
context.beginPath();
context.arc(410, 380, 100, 0*Math.PI, 2*Math.PI, true);
context.lineWidth = 15;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "gray";
context.fill();
context.beginPath();
context.arc(410, 380, 50, 0*Math.PI, 2*Math.PI, true);
context.lineWidth = 15;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "white";
context.fill();
context.beginPath();
context.arc(410, 380, 10, 0*Math.PI, 2*Math.PI, true);
context.lineWidth = 15;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "black";
context.fill();
context.beginPath();
context.arc(410, 380, 5, 0*Math.PI, 2*Math.PI, true);
context.lineWidth = 15;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "yellow";
context.fill();
context.beginPath();
context.arc(410, 415, 5, 0*Math.PI, 2*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "red";
context.fill();
context.beginPath();
context.arc(410, 345, 5, 0*Math.PI, 2*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "green";
context.fill();
context.beginPath();
context.arc(445, 380, 5, 0*Math.PI, 2*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "blue";
context.fill();
context.beginPath();
context.arc(375, 380, 5, 0*Math.PI, 2*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "purple";
context.fill();
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="800"></canvas>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start here
//// BKGD
context.beginPath();
context.rect(0,0,canvas.width, canvas.height);
context.fillStyle = "yellow";
context.fill();
context.beginPath();
context.arc(410, 380, 300, 0*Math.PI, 2*Math.PI, true);
context.lineWidth = 15;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "red";
context.fill();
context.beginPath();
context.arc(410, 380, 250, 0*Math.PI, 2*Math.PI, true);
context.lineWidth = 15;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "purple";
context.fill();
context.beginPath();
context.arc(410, 380, 200, 0*Math.PI, 2*Math.PI, true);
context.lineWidth = 15;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "blue";
context.fill();
context.beginPath();
context.arc(410, 380, 150, 0*Math.PI, 2*Math.PI, true);
context.lineWidth = 15;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "green";
context.fill();
context.beginPath();
context.arc(410, 380, 100, 0*Math.PI, 2*Math.PI, true);
context.lineWidth = 15;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "gray";
context.fill();
context.beginPath();
context.arc(410, 380, 50, 0*Math.PI, 2*Math.PI, true);
context.lineWidth = 15;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "white";
context.fill();
context.beginPath();
context.arc(410, 380, 10, 0*Math.PI, 2*Math.PI, true);
context.lineWidth = 15;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "black";
context.fill();
context.beginPath();
context.arc(410, 380, 5, 0*Math.PI, 2*Math.PI, true);
context.lineWidth = 15;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "yellow";
context.fill();
context.beginPath();
context.arc(410, 415, 5, 0*Math.PI, 2*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "red";
context.fill();
context.beginPath();
context.arc(410, 345, 5, 0*Math.PI, 2*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "green";
context.fill();
context.beginPath();
context.arc(445, 380, 5, 0*Math.PI, 2*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "blue";
context.fill();
context.beginPath();
context.arc(375, 380, 5, 0*Math.PI, 2*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "purple";
context.fill();
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="800"></canvas>
</body>
</html>
Practice - Characters - Homer Simpson
CODE:
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start here
//// BKGD
context.beginPath();
context.rect(0,0,canvas.width, canvas.height);
context.fillStyle = "yellow";
context.fill();
/////////////////////// ARC = FRAGMENT OF A CIRCLE
//hair
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(410, 183, 140, 0*Math.PI, 2*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "yellow";
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(410, 187, 130, 0*Math.PI, 2*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "yellow";
context.fill();
//////////////head
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(410, 380, 300, 0*Math.PI, 2*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "yellow";
//context.closePath();
context.stroke();
context.fillStyle = "yellow";
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(410, 280, 210, 2*Math.PI, 1*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "yellow";
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(612, 300, 30, 2.4*Math.PI, 1.57*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "yellow";
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(207, 298, 30, 1.4*Math.PI, 2.2*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "yellow";
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(237, 420, 30, 1.7*Math.PI, 2.8*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "yellow";
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(587, 431, 30, 2*Math.PI, 1.1*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "yellow";
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(360, 500, 155, 1*Math.PI, 2.82*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "yellow";
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(460, 505, 155, 2.2*Math.PI, 2*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "yellow";
context.fill();
///////////////////// mouth
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(405, 670, 200, 2*Math.PI, 0*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "#d1b271";
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(405, 750, 30, 2*Math.PI, 0*Math.PI, true);
context.lineWidth = 7;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "#d1b271";
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(405, 750, 10, 2*Math.PI, 0*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "black";
context.fill();
//////nose
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(410, 450, 50, 1.25*Math.PI, 1.75*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "yellow";
context.fill();
//right
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(530, 350, 100, 2*Math.PI, 0*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "white";
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(530, 350, 10, 2*Math.PI, 0*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "black";
context.fill();
//left
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(290, 350, 100, 2*Math.PI, 0*Math.PI, false);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "white";
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(290, 350, 10, 2*Math.PI, 0*Math.PI, false);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "black";
context.fill();
//right ear
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(630, 465, 40, 2.6*Math.PI, 1.4*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "yellow";
context.fill();
//left ear
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(180, 468, 40, 1.74*Math.PI, 2.28*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "yellow";
context.fill();
////////////////////////////////////// end here
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="1000"></canvas>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start here
//// BKGD
context.beginPath();
context.rect(0,0,canvas.width, canvas.height);
context.fillStyle = "yellow";
context.fill();
/////////////////////// ARC = FRAGMENT OF A CIRCLE
//hair
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(410, 183, 140, 0*Math.PI, 2*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "yellow";
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(410, 187, 130, 0*Math.PI, 2*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "yellow";
context.fill();
//////////////head
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(410, 380, 300, 0*Math.PI, 2*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "yellow";
//context.closePath();
context.stroke();
context.fillStyle = "yellow";
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(410, 280, 210, 2*Math.PI, 1*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "yellow";
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(612, 300, 30, 2.4*Math.PI, 1.57*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "yellow";
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(207, 298, 30, 1.4*Math.PI, 2.2*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "yellow";
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(237, 420, 30, 1.7*Math.PI, 2.8*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "yellow";
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(587, 431, 30, 2*Math.PI, 1.1*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "yellow";
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(360, 500, 155, 1*Math.PI, 2.82*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "yellow";
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(460, 505, 155, 2.2*Math.PI, 2*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "yellow";
context.fill();
///////////////////// mouth
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(405, 670, 200, 2*Math.PI, 0*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "#d1b271";
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(405, 750, 30, 2*Math.PI, 0*Math.PI, true);
context.lineWidth = 7;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "#d1b271";
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(405, 750, 10, 2*Math.PI, 0*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "black";
context.fill();
//////nose
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(410, 450, 50, 1.25*Math.PI, 1.75*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "yellow";
context.fill();
//right
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(530, 350, 100, 2*Math.PI, 0*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "white";
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(530, 350, 10, 2*Math.PI, 0*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "black";
context.fill();
//left
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(290, 350, 100, 2*Math.PI, 0*Math.PI, false);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "white";
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(290, 350, 10, 2*Math.PI, 0*Math.PI, false);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "black";
context.fill();
//right ear
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(630, 465, 40, 2.6*Math.PI, 1.4*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "yellow";
context.fill();
//left ear
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(180, 468, 40, 1.74*Math.PI, 2.28*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "yellow";
context.fill();
////////////////////////////////////// end here
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="1000"></canvas>
</body>
</html>
Practice - Characters - Homer Simpson 2
CODE:
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start here
//// BKGD
context.beginPath();
context.rect(0,0,canvas.width, canvas.height);
context.fillStyle = "pink";
context.fill();
/////////////////////// ARC = FRAGMENT OF A CIRCLE
//hair
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(410, 300, 250, 0*Math.PI, 2*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "pink";
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(410, 287, 220, 0*Math.PI, 2*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "pink";
context.fill();
//////////////head
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(410, 380, 300, 0*Math.PI, 2*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "yellow";
//context.closePath();
context.stroke();
context.fillStyle = "yellow";
context.fill();
///////////////////// mouth
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(405, 520, 150, 2*Math.PI, 0*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "603913";
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(405, 590, 30, 2*Math.PI, 0*Math.PI, true);
context.lineWidth = 7;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "603913";
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(405, 590, 10, 2*Math.PI, 0*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "black";
context.fill();
//////nose
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(410, 400, 50, 1.25*Math.PI, 1.75*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "yellow";
context.fill();
//right
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(520, 300, 100, 2*Math.PI, 0*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "white";
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(520, 300, 20, 2*Math.PI, 0*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "black";
context.fill();
//left
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(300, 300, 100, 2*Math.PI, 0*Math.PI, false);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "white";
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(300, 300, 20, 2*Math.PI, 0*Math.PI, false);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "black";
context.fill();
//right ear
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(720, 340, 50, 2*Math.PI, 0*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "yellow";
//context.closePath();
context.stroke();
context.fillStyle = "yellow";
context.fill();
//left ear
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(100, 340, 50, 2*Math.PI, 0*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "yellow";
//context.closePath();
context.stroke();
context.fillStyle = "yellow";
context.fill();
////////////////////////////////////// end here
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="800"></canvas>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start here
//// BKGD
context.beginPath();
context.rect(0,0,canvas.width, canvas.height);
context.fillStyle = "pink";
context.fill();
/////////////////////// ARC = FRAGMENT OF A CIRCLE
//hair
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(410, 300, 250, 0*Math.PI, 2*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "pink";
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(410, 287, 220, 0*Math.PI, 2*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "pink";
context.fill();
//////////////head
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(410, 380, 300, 0*Math.PI, 2*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "yellow";
//context.closePath();
context.stroke();
context.fillStyle = "yellow";
context.fill();
///////////////////// mouth
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(405, 520, 150, 2*Math.PI, 0*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "603913";
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(405, 590, 30, 2*Math.PI, 0*Math.PI, true);
context.lineWidth = 7;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "603913";
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(405, 590, 10, 2*Math.PI, 0*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "black";
context.fill();
//////nose
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(410, 400, 50, 1.25*Math.PI, 1.75*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "yellow";
context.fill();
//right
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(520, 300, 100, 2*Math.PI, 0*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "white";
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(520, 300, 20, 2*Math.PI, 0*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "black";
context.fill();
//left
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(300, 300, 100, 2*Math.PI, 0*Math.PI, false);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "white";
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(300, 300, 20, 2*Math.PI, 0*Math.PI, false);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "black";
context.fill();
//right ear
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(720, 340, 50, 2*Math.PI, 0*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "yellow";
//context.closePath();
context.stroke();
context.fillStyle = "yellow";
context.fill();
//left ear
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(100, 340, 50, 2*Math.PI, 0*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "yellow";
//context.closePath();
context.stroke();
context.fillStyle = "yellow";
context.fill();
////////////////////////////////////// end here
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="800"></canvas>
</body>
</html>
Practice - Characters - Hey Arnold!
CODE:
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start here
// CANVAS BKGD
context.beginPath();
context.rect(0,0,canvas.width, canvas.height);
context.fillStyle = "white";
context.fill();
////// Hair Left
context.beginPath();
context.moveTo(400,300); // STARTING POINT OF MY CURVE
context.quadraticCurveTo( 400, 100, 900, 100 ); // controlX, controlY, endX, endY
context.strokeStyle = "yellow";
context.lineWidth = 5;
context.stroke();
context.moveTo(460,300); // STARTING POINT OF MY CURVE
context.quadraticCurveTo( 500, 100, 1000, 300 ); // controlX, controlY, endX, endY
context.fillStyle = "yellow";
context.fill();
context.strokeStyle = "black";
context.lineWidth = 10;
context.closePath();
///////////// Hair Right
context.beginPath();
context.moveTo(-400,-100); // STARTING POINT OF MY CURVE
context.quadraticCurveTo( 400, 500, 300, 200 ); // controlX, controlY, endX, endY
context.strokeStyle = "yellow";
context.lineWidth = 5;
context.stroke();
context.moveTo(500,300); // STARTING POINT OF MY CURVE
context.quadraticCurveTo(-90, 100, 20,330 ); // controlX, controlY, endX, endY
context.fillStyle = "yellow";
context.fill();
context.strokeStyle = "black";
context.lineWidth = 10;
context.closePath();
// Head
context.beginPath();
context.moveTo(15,295); // STARTING POINT OF MY CURVE
context.quadraticCurveTo( 400, 100, 800, 300 ); // controlX, controlY, endX, endY
context.bezierCurveTo(820,280,820,340,800,320);
//context.strokeStyle = "black";
//context.lineWidth = 5;
//context.stroke();
//context.arc(800, 300, 8, 2.6*Math.PI, 1.4*Math.PI, true);
//context.beginPath();
//context.moveTo(15,305); // STARTING POINT OF MY CURVE
context.quadraticCurveTo( 400, 600, 15, 312 ); // controlX, controlY, endX, endY
context.bezierCurveTo(-5,320,-5,280,15,295);
//context.strokeStyle = "black";
//context.lineWidth = 5;
//context.stroke();
///////////context.arc(15, 300, 8, 1.74*Math.PI, 2.28*Math.PI, true);
//////right ear
//context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
//context.lineWidth = 10;
//context.strokeStyle = "black";
////context.closePath();
//context.stroke();
//context.fill();
/////left ear
//context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.lineWidth = 10;
context.strokeStyle = "black";
context.closePath();
context.fillStyle = "beige";
context.stroke();
context.closePath()
context.fill();
//////left eye
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(580, 300, 40, 2*Math.PI, 0*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "white";
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(570, 310, 5, 2*Math.PI, 0*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "black";
context.fill();
///////right eye
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(220, 300, 40, 2*Math.PI, 0*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "white";
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(210, 310, 5, 2*Math.PI, 0*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "black";
context.fill();
///// right eyelid
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(220, 300, 40, 2*Math.PI, 1*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "beige";
context.fill();
///// left eyelid
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(580, 300, 40, 2*Math.PI, 1*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "beige";
context.fill();
////// nose
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(370, 350, 50, 1.6*Math.PI, 2.1*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "beige";
context.fill();
//////// mouth
context.beginPath();
context.moveTo(380,440); // STARTING POINT OF MY CURVE
context.quadraticCurveTo( 600, 400, 500, 400 ); // controlX, controlY, endX, endY
context.strokeStyle = "black";
context.lineWidth = 5;
context.stroke();
////// hat
context.beginPath();
context.moveTo(455,205); // STARTING POINT OF MY CURVE
context.quadraticCurveTo( 200, 300, 390, 150 ); // controlX, controlY, endX, endY
context.strokeStyle = "black";
context.lineWidth = 5;
context.stroke();
context.fillStyle = "#04bbff";
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(390, 205, 60, 2*Math.PI, 1*Math.PI, true);
context.lineWidth = 5;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "#04bbff";
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(390, 145, 5, 2*Math.PI, 1*Math.PI, true);
context.lineWidth = 5;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "#04bbff";
context.fill();
////////////////////////////////////// end here
};
</script>
</head>
<body>
<canvas id="myCanvas" width="1100" height="600"></canvas>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start here
// CANVAS BKGD
context.beginPath();
context.rect(0,0,canvas.width, canvas.height);
context.fillStyle = "white";
context.fill();
////// Hair Left
context.beginPath();
context.moveTo(400,300); // STARTING POINT OF MY CURVE
context.quadraticCurveTo( 400, 100, 900, 100 ); // controlX, controlY, endX, endY
context.strokeStyle = "yellow";
context.lineWidth = 5;
context.stroke();
context.moveTo(460,300); // STARTING POINT OF MY CURVE
context.quadraticCurveTo( 500, 100, 1000, 300 ); // controlX, controlY, endX, endY
context.fillStyle = "yellow";
context.fill();
context.strokeStyle = "black";
context.lineWidth = 10;
context.closePath();
///////////// Hair Right
context.beginPath();
context.moveTo(-400,-100); // STARTING POINT OF MY CURVE
context.quadraticCurveTo( 400, 500, 300, 200 ); // controlX, controlY, endX, endY
context.strokeStyle = "yellow";
context.lineWidth = 5;
context.stroke();
context.moveTo(500,300); // STARTING POINT OF MY CURVE
context.quadraticCurveTo(-90, 100, 20,330 ); // controlX, controlY, endX, endY
context.fillStyle = "yellow";
context.fill();
context.strokeStyle = "black";
context.lineWidth = 10;
context.closePath();
// Head
context.beginPath();
context.moveTo(15,295); // STARTING POINT OF MY CURVE
context.quadraticCurveTo( 400, 100, 800, 300 ); // controlX, controlY, endX, endY
context.bezierCurveTo(820,280,820,340,800,320);
//context.strokeStyle = "black";
//context.lineWidth = 5;
//context.stroke();
//context.arc(800, 300, 8, 2.6*Math.PI, 1.4*Math.PI, true);
//context.beginPath();
//context.moveTo(15,305); // STARTING POINT OF MY CURVE
context.quadraticCurveTo( 400, 600, 15, 312 ); // controlX, controlY, endX, endY
context.bezierCurveTo(-5,320,-5,280,15,295);
//context.strokeStyle = "black";
//context.lineWidth = 5;
//context.stroke();
///////////context.arc(15, 300, 8, 1.74*Math.PI, 2.28*Math.PI, true);
//////right ear
//context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
//context.lineWidth = 10;
//context.strokeStyle = "black";
////context.closePath();
//context.stroke();
//context.fill();
/////left ear
//context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.lineWidth = 10;
context.strokeStyle = "black";
context.closePath();
context.fillStyle = "beige";
context.stroke();
context.closePath()
context.fill();
//////left eye
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(580, 300, 40, 2*Math.PI, 0*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "white";
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(570, 310, 5, 2*Math.PI, 0*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "black";
context.fill();
///////right eye
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(220, 300, 40, 2*Math.PI, 0*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "white";
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(210, 310, 5, 2*Math.PI, 0*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "black";
context.fill();
///// right eyelid
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(220, 300, 40, 2*Math.PI, 1*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "beige";
context.fill();
///// left eyelid
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(580, 300, 40, 2*Math.PI, 1*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "beige";
context.fill();
////// nose
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(370, 350, 50, 1.6*Math.PI, 2.1*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "beige";
context.fill();
//////// mouth
context.beginPath();
context.moveTo(380,440); // STARTING POINT OF MY CURVE
context.quadraticCurveTo( 600, 400, 500, 400 ); // controlX, controlY, endX, endY
context.strokeStyle = "black";
context.lineWidth = 5;
context.stroke();
////// hat
context.beginPath();
context.moveTo(455,205); // STARTING POINT OF MY CURVE
context.quadraticCurveTo( 200, 300, 390, 150 ); // controlX, controlY, endX, endY
context.strokeStyle = "black";
context.lineWidth = 5;
context.stroke();
context.fillStyle = "#04bbff";
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(390, 205, 60, 2*Math.PI, 1*Math.PI, true);
context.lineWidth = 5;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "#04bbff";
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(390, 145, 5, 2*Math.PI, 1*Math.PI, true);
context.lineWidth = 5;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "#04bbff";
context.fill();
////////////////////////////////////// end here
};
</script>
</head>
<body>
<canvas id="myCanvas" width="1100" height="600"></canvas>
</body>
</html>
Practice - Characters - Danny Phantom
CODE:
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start here
// CANVAS BKGD
context.beginPath();
context.rect(0,0,canvas.width, canvas.height);
context.fillStyle = "white";
context.fill();
///// Right Ear
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(190, 293, 15, 1.74*Math.PI, 2.28*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "tan";
context.fill();
//// Hair
context.beginPath();
context.moveTo(433, 275);
context.lineTo(480, 170);
context.lineTo(280, 130);
context.lineTo(320, 170);
context.lineTo(100, 170);
context.lineTo(433, 275);
context.fillStyle = "#aabbcb";
context.fill();
context.closePath
context.strokeStyle = "black";
context.lineWidth = 6
context.stroke();
////// Head shape
context.beginPath();
context.moveTo(200, 200);
context.lineTo(200, 350);
context.lineTo(350, 430);
context.lineTo(430, 350);
context.lineTo(430, 200);
context.lineTo(200, 200);
context.fillStyle = "tan";
context.fill();
context.lineWidth = 6
context.closePath();
context.stroke();
////////// Right Eye
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(250, 262, 30, 2*Math.PI, 0*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "white";
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(250, 262, 15, 2*Math.PI, 0*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "#87c779";
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(250, 262, 3, 2*Math.PI, 0*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "black";
context.fill();
//////// Right Eyebrow
context.beginPath();
context.moveTo(286, 230);
context.lineTo(290, 245);
context.lineTo(290, 245);
context.lineTo(213, 245);
context.lineTo(215, 232);
context.fillStyle = "black";
context.fill();
context.lineWidth = 6
context.closePath();
context.stroke();
//////// Left Eye
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(360, 262, 30, 2*Math.PI, 0*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "white";
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(360, 262, 15, 2*Math.PI, 0*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "#87c779";
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(360, 262, 3, 2*Math.PI, 0*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "black";
context.fill();
///////// Left Eyebrow
context.beginPath();
context.moveTo(330, 230);
context.lineTo(325, 245);
context.lineTo(400, 240);
context.lineTo(400, 230);
context.fillStyle = "black";
context.fill();
context.lineWidth = 6
context.closePath();
context.stroke();
///////// Nose
context.beginPath();
context.moveTo(300, 270);
context.lineTo(300, 300);
context.lineTo(290, 310);
context.lineTo(300, 320);
context.lineWidth = 6
context.stroke();
/////// Mouth
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(360, 390, 40, 1.54*Math.PI, 3.28*Math.PI, true);
context.lineWidth = 3;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fill();
/////// Left Ear
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(431, 293, 15, 2.6*Math.PI, 1.4*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "tan";
context.fill();
///// Hair Front
context.beginPath();
context.moveTo(200, 196);
context.lineTo(140, 200);
context.lineTo(100, 230);
context.lineTo(90, 300);
context.lineTo(330, 200);
context.lineTo(310, 220);
context.lineTo(360, 202);
context.lineTo(380, 196);
context.fillStyle = "#aabbcb";
context.fill();
context.strokeStyle = "black";
context.lineWidth = 6
context.stroke();
////////////////////////////////////// end here
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start here
// CANVAS BKGD
context.beginPath();
context.rect(0,0,canvas.width, canvas.height);
context.fillStyle = "white";
context.fill();
///// Right Ear
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(190, 293, 15, 1.74*Math.PI, 2.28*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "tan";
context.fill();
//// Hair
context.beginPath();
context.moveTo(433, 275);
context.lineTo(480, 170);
context.lineTo(280, 130);
context.lineTo(320, 170);
context.lineTo(100, 170);
context.lineTo(433, 275);
context.fillStyle = "#aabbcb";
context.fill();
context.closePath
context.strokeStyle = "black";
context.lineWidth = 6
context.stroke();
////// Head shape
context.beginPath();
context.moveTo(200, 200);
context.lineTo(200, 350);
context.lineTo(350, 430);
context.lineTo(430, 350);
context.lineTo(430, 200);
context.lineTo(200, 200);
context.fillStyle = "tan";
context.fill();
context.lineWidth = 6
context.closePath();
context.stroke();
////////// Right Eye
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(250, 262, 30, 2*Math.PI, 0*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "white";
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(250, 262, 15, 2*Math.PI, 0*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "#87c779";
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(250, 262, 3, 2*Math.PI, 0*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "black";
context.fill();
//////// Right Eyebrow
context.beginPath();
context.moveTo(286, 230);
context.lineTo(290, 245);
context.lineTo(290, 245);
context.lineTo(213, 245);
context.lineTo(215, 232);
context.fillStyle = "black";
context.fill();
context.lineWidth = 6
context.closePath();
context.stroke();
//////// Left Eye
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(360, 262, 30, 2*Math.PI, 0*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "white";
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(360, 262, 15, 2*Math.PI, 0*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "#87c779";
context.fill();
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(360, 262, 3, 2*Math.PI, 0*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "black";
context.fill();
///////// Left Eyebrow
context.beginPath();
context.moveTo(330, 230);
context.lineTo(325, 245);
context.lineTo(400, 240);
context.lineTo(400, 230);
context.fillStyle = "black";
context.fill();
context.lineWidth = 6
context.closePath();
context.stroke();
///////// Nose
context.beginPath();
context.moveTo(300, 270);
context.lineTo(300, 300);
context.lineTo(290, 310);
context.lineTo(300, 320);
context.lineWidth = 6
context.stroke();
/////// Mouth
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(360, 390, 40, 1.54*Math.PI, 3.28*Math.PI, true);
context.lineWidth = 3;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fill();
/////// Left Ear
context.beginPath();
// context.arc(x, y, radius, startAngle, endAngle, antiClockwise);
// context.arc(400, 300, 100, 0.75*Math.PI, 1.25*Math.PI, false);
context.arc(431, 293, 15, 2.6*Math.PI, 1.4*Math.PI, true);
context.lineWidth = 10;
context.strokeStyle = "black";
//context.closePath();
context.stroke();
context.fillStyle = "tan";
context.fill();
///// Hair Front
context.beginPath();
context.moveTo(200, 196);
context.lineTo(140, 200);
context.lineTo(100, 230);
context.lineTo(90, 300);
context.lineTo(330, 200);
context.lineTo(310, 220);
context.lineTo(360, 202);
context.lineTo(380, 196);
context.fillStyle = "#aabbcb";
context.fill();
context.strokeStyle = "black";
context.lineWidth = 6
context.stroke();
////////////////////////////////////// end here
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
Code:
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start here
var maxLoop = 100;
for (var yay=0; yay < maxLoop; yay += 1) {
var randR = Math.random(); // number between 0 and 1
var randG = Math.random();
var randB = Math.random();
var randRad = Math.random();
var randH = Math.random();
var randW = Math.random();
var R = Math.round(155 * randR);
//var R = 0;
var G = Math.round(125 * randG);
//var G = 0;
var B = Math.round(155 * randB);
var A = randR;
var RGBA = "rgba("+R+","+G+","+B+","+A+")";
var x = canvas.width * randW ;
var y = canvas.height * randH ;
var rad = 100 * randRad ;
var sA = 0;
var eA = Math.PI * 2;
var cW = true;
//var cW = Math.round(Math.random());
context.beginPath();
context.arc(x ,y ,rad ,sA ,eA ,cW);
context.fillStyle = RGBA;
context.fill();
context.lineWidth = 5;
context.stroke();
context.closePath();
document.getElementById("display").innerHTML += x + " " + y + " " + R +" "+G+" " + B + "<br />";
}
for (var i=0; i<100; i+=10) { // COUNTER!!!! => REPEAT LOOP
var R = 155;
var G = 20;
var B = 110;
var A = 0.8;
var RGBA = "rgba("+R+","+G+","+B+","+A+")";
var x = 100 + i*3;
var y = 150 + i*2;
var rad = 50 + i;
var sA = 0;
var eA = Math.PI * 2;
var cW = true;
context.beginPath();
context.arc(x ,y ,rad ,sA ,eA ,cW);
context.fillStyle = RGBA;
context.fill();
context.lineWidth = 5;
context.stroke();
context.closePath();
}
for (var i=0; i<100; i+=10) { // COUNTER!!!! => REPEAT LOOP
var R = 115;
var G = 20;
var B = 110;
var A = 0.8;
var RGBA = "rgba("+R+","+G+","+B+","+A+")";
var x = 100 + i*3;
var y = 120 + i*2;
var rad = 50 + i;
var sA = 0;
var eA = Math.PI * 2;
var cW = true;
context.beginPath();
context.arc(x ,y ,rad ,sA ,eA ,cW);
context.fillStyle = RGBA;
context.fill();
context.lineWidth = 10;
context.stroke();
context.closePath();
}
for (var i=0; i<100; i+=10) { // COUNTER!!!! => REPEAT LOOP
var R = 15;
var G = 20;
var B = 110;
var A = 0.8;
var RGBA = "rgba("+R+","+G+","+B+","+A+")";
var x = 100 + i*3;
var y = 80 + i*2;
var rad = 50 + i;
var sA = 0;
var eA = Math.PI * 2;
var cW = true;
context.beginPath();
context.arc(x ,y ,rad ,sA ,eA ,cW);
context.fillStyle = RGBA;
context.fill();
context.lineWidth = 15;
context.stroke();
context.closePath();
}
for (var i=0; i<100; i+=10) { // COUNTER!!!! => REPEAT LOOP
var R = 34;
var G = 60;
var B = 110;
var A = 0.8;
var RGBA = "rgba("+R+","+G+","+B+","+A+")";
var x = 100 + i*3;
var y = 30 + i*2;
var rad = 50 + i;
var sA = 0;
var eA = Math.PI * 2;
var cW = true;
context.beginPath();
context.arc(x ,y ,rad ,sA ,eA ,cW);
context.fillStyle = RGBA;
context.fill();
context.lineWidth = 25;
context.stroke();
context.closePath();
}
for (var i=0; i<100; i+=10) { // COUNTER!!!! => REPEAT LOOP
var R = 34;
var G = 60;
var B = 20;
var A = 0.3;
var RGBA = "rgba("+R+","+G+","+B+","+A+")";
var x = 100 + i*3;
var y = 30 + i*2;
var rad = 10 + i;
var sA = 0;
var eA = Math.PI * 2;
var cW = true;
context.beginPath();
context.arc(x ,y ,rad ,sA ,eA ,cW);
context.fillStyle = RGBA;
context.fill();
context.lineWidth = 5;
context.stroke();
context.closePath();
}
////////////////////////////////////// end here
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<br /> <br />
<div id="display"> </div>
</body>
</html>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start here
var maxLoop = 100;
for (var yay=0; yay < maxLoop; yay += 1) {
var randR = Math.random(); // number between 0 and 1
var randG = Math.random();
var randB = Math.random();
var randRad = Math.random();
var randH = Math.random();
var randW = Math.random();
var R = Math.round(155 * randR);
//var R = 0;
var G = Math.round(125 * randG);
//var G = 0;
var B = Math.round(155 * randB);
var A = randR;
var RGBA = "rgba("+R+","+G+","+B+","+A+")";
var x = canvas.width * randW ;
var y = canvas.height * randH ;
var rad = 100 * randRad ;
var sA = 0;
var eA = Math.PI * 2;
var cW = true;
//var cW = Math.round(Math.random());
context.beginPath();
context.arc(x ,y ,rad ,sA ,eA ,cW);
context.fillStyle = RGBA;
context.fill();
context.lineWidth = 5;
context.stroke();
context.closePath();
document.getElementById("display").innerHTML += x + " " + y + " " + R +" "+G+" " + B + "<br />";
}
for (var i=0; i<100; i+=10) { // COUNTER!!!! => REPEAT LOOP
var R = 155;
var G = 20;
var B = 110;
var A = 0.8;
var RGBA = "rgba("+R+","+G+","+B+","+A+")";
var x = 100 + i*3;
var y = 150 + i*2;
var rad = 50 + i;
var sA = 0;
var eA = Math.PI * 2;
var cW = true;
context.beginPath();
context.arc(x ,y ,rad ,sA ,eA ,cW);
context.fillStyle = RGBA;
context.fill();
context.lineWidth = 5;
context.stroke();
context.closePath();
}
for (var i=0; i<100; i+=10) { // COUNTER!!!! => REPEAT LOOP
var R = 115;
var G = 20;
var B = 110;
var A = 0.8;
var RGBA = "rgba("+R+","+G+","+B+","+A+")";
var x = 100 + i*3;
var y = 120 + i*2;
var rad = 50 + i;
var sA = 0;
var eA = Math.PI * 2;
var cW = true;
context.beginPath();
context.arc(x ,y ,rad ,sA ,eA ,cW);
context.fillStyle = RGBA;
context.fill();
context.lineWidth = 10;
context.stroke();
context.closePath();
}
for (var i=0; i<100; i+=10) { // COUNTER!!!! => REPEAT LOOP
var R = 15;
var G = 20;
var B = 110;
var A = 0.8;
var RGBA = "rgba("+R+","+G+","+B+","+A+")";
var x = 100 + i*3;
var y = 80 + i*2;
var rad = 50 + i;
var sA = 0;
var eA = Math.PI * 2;
var cW = true;
context.beginPath();
context.arc(x ,y ,rad ,sA ,eA ,cW);
context.fillStyle = RGBA;
context.fill();
context.lineWidth = 15;
context.stroke();
context.closePath();
}
for (var i=0; i<100; i+=10) { // COUNTER!!!! => REPEAT LOOP
var R = 34;
var G = 60;
var B = 110;
var A = 0.8;
var RGBA = "rgba("+R+","+G+","+B+","+A+")";
var x = 100 + i*3;
var y = 30 + i*2;
var rad = 50 + i;
var sA = 0;
var eA = Math.PI * 2;
var cW = true;
context.beginPath();
context.arc(x ,y ,rad ,sA ,eA ,cW);
context.fillStyle = RGBA;
context.fill();
context.lineWidth = 25;
context.stroke();
context.closePath();
}
for (var i=0; i<100; i+=10) { // COUNTER!!!! => REPEAT LOOP
var R = 34;
var G = 60;
var B = 20;
var A = 0.3;
var RGBA = "rgba("+R+","+G+","+B+","+A+")";
var x = 100 + i*3;
var y = 30 + i*2;
var rad = 10 + i;
var sA = 0;
var eA = Math.PI * 2;
var cW = true;
context.beginPath();
context.arc(x ,y ,rad ,sA ,eA ,cW);
context.fillStyle = RGBA;
context.fill();
context.lineWidth = 5;
context.stroke();
context.closePath();
}
////////////////////////////////////// end here
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<br /> <br />
<div id="display"> </div>
</body>
</html>