Text Poems
MANDALAS
Random Free Play
Wire Frames
Code
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start here
var inc = 10;
for (var i=0; i < canvas.height; i+=inc ) {
////////////left frames
context.beginPath();
context.moveTo(canvas.width+i, 0);
context.lineTo(0, i); // increment is 20
context.lineTo(i*10,i);
context.fillStyle = "rgba(0,255,255,0.01)";
context.fill();
context.stroke();
context.closePath();
///////////bottom frames
context.beginPath();
context.moveTo(-i, canvas.height);
context.lineTo(canvas.width, canvas.height/2.4+i);
context.lineTo(canvas.width*i, canvas.height/2);
context.fillStyle = "rgba(255,0,0,0.01)";
context.fill();
context.stroke();
context.closePath();
//////////////right frmes
context.beginPath();
context.moveTo(i, 0);
context.lineTo(canvas.width, i);
context.lineTo(canvas.width*2, 0);
context.fillStyle = "rgba(0,0,255,0.01)";
context.fill();
context.stroke();
context.closePath();
context.strokeStyle = "black";
context.lineWidth = 6;
}
////////////////////////////////////// end here
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
Variables and Loops
Using Variables
Code
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start here
// the initial value of i is 0
// as long as i is smaller than 100
// modify or increase the value of i by 1
// i++ is the same as i+=1;
for (var i=0; i<100; i+=10) { // COUNTER!!!! => REPEAT LOOP
//for (var G=0; G<100; G+=10)
var R = 105;
var G = 250 +i;
var B = 100;
var A = 0.8;
var RGBA = "rgba("+R+","+G+","+B+","+A+")";
var x = 100 + i*2;
var y = 150 + i*2;
var rad = 100 + i*2;
var sA = .9;
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 = 100/i;
context.stroke();
context.closePath();
context.beginPath();
context.arc(x-i ,y ,rad ,sA ,eA ,cW);
context.fillStyle = RGBA;
context.fill();
context.lineWidth = 100/i;
context.stroke();
context.closePath();
context.beginPath();
context.arc(x-i*2 ,y ,rad ,sA ,eA ,cW);
context.fillStyle = RGBA;
context.fill();
context.lineWidth = 100/i;
context.stroke();
context.closePath();
context.beginPath();
context.arc(x-i*3 ,y ,rad ,sA ,eA ,cW);
context.fillStyle = RGBA;
context.fill();
context.lineWidth = 100/i;
context.stroke();
context.closePath();
context.beginPath();
context.arc(x-i*4 ,y ,rad ,sA ,eA ,cW);
context.fillStyle = RGBA;
context.fill();
context.lineWidth = 100/i;
context.stroke();
context.closePath();
context.beginPath();
context.arc(x-i*5 ,y ,rad ,sA ,eA ,cW);
context.fillStyle = RGBA;
context.fill();
context.lineWidth = 100/i;
context.stroke();
context.closePath();
context.beginPath();
context.arc(x-i*6 ,y ,rad ,sA ,eA ,cW);
context.fillStyle = RGBA;
context.fill();
context.lineWidth = 100/i;
context.stroke();
context.closePath();
context.beginPath();
context.arc(x-i*-1 ,y ,rad ,sA ,eA ,cW);
context.fillStyle = RGBA;
context.fill();
context.lineWidth = 100/i;
context.stroke();
context.closePath();
context.beginPath();
context.arc(x-i*-2 ,y ,rad ,sA ,eA ,cW);
context.fillStyle = RGBA;
context.fill();
context.lineWidth = 100/i;
context.stroke();
context.closePath();
context.beginPath();
context.arc(x-i*-3 ,y ,rad ,sA ,eA ,cW);
context.fillStyle = RGBA;
context.fill();
context.lineWidth = 100/i;
context.stroke();
context.closePath();
context.beginPath();
context.arc(x-i*-4 ,y ,rad ,sA ,eA ,cW);
context.fillStyle = RGBA;
context.fill();
context.lineWidth = 100/i;
context.stroke();
context.closePath();
context.beginPath();
context.arc(x-i*-5 ,y ,rad ,sA ,eA ,cW);
context.fillStyle = RGBA;
context.fill();
context.lineWidth = 100/i;
context.stroke();
context.closePath();
}
////////////////////////////////////// end here
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
Project #1 Final "Night Landscape"
Code
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
//////////////sky
context.beginPath();
context.rect(0,0,800,400);
var grd = context.createLinearGradient(400, 0, 400, 600);
// dark blue
grd.addColorStop(.1, "#0F1A7A");
// light blue
grd.addColorStop(.4, "#D1CBCD");
//yellow
grd.addColorStop(.49, "#FFFDB8");
context.fillStyle = grd;
context.fill();
///////sun
context.beginPath();
context.rect(0,0,100,300);
var grd = context.createLinearGradient(0, 300, 400, 600);
// light blue
grd.addColorStop(.33, "#FFFFD2");
//yellow
grd.addColorStop(.4, "#FFFDB8");
context.fillStyle = grd;
context.fill();
////////////////water
var canvas = document.getElementById("myCanvas");
context.beginPath();
context.rect(0,325,800,600);
var grd = context.createRadialGradient(-100, 250, 150, 100, 100, 500);
// yellow
grd.addColorStop(0, "#FFFDB8");
// dark blue
grd.addColorStop(.7, "#31679A");
context.fillStyle = grd;
context.fill();
//////////////waves
//////// mountains
context.beginPath();
context.moveTo(-50, 300);
context.bezierCurveTo(200, 150, 150, 350, 400, 270);
context.bezierCurveTo(700, 200, 550, 200, 820, 300);
context.lineTo(820, 340);
context.bezierCurveTo(0, 350, 450, 310, -100, 330);
context.lineTo(-50, 300);
var grd = context.createLinearGradient(0, 400, 400, 800);
// light brown
grd.addColorStop(.1, "#944408");
// dark brown
grd.addColorStop(.4, "#371918");
context.fillStyle = grd;
context.fill();
//context.lineWidth = .5;
//
// context.strokeStyle = "black";
// context.fillStyle = 'rgb(65,30,27)';
// context.fill();
// context.stroke();
//
////////////boat
context.beginPath();
context.moveTo(390, 445);
context.quadraticCurveTo(335, 535, 400, 600);
context.lineWidth = 2;
context.fillStyle = 'rgb(196,40,4)';
context.fill();
context.beginPath();
context.moveTo(392, 445);
context.quadraticCurveTo(350, 525, 400, 575);
context.lineTo(430, 575);
context.quadraticCurveTo(450, 500, 390, 445);
context.lineWidth = 5;
context.strokeStyle = 'rgb(170,117,13)';
var grd = context.createLinearGradient(390, 400, 480, 600);
// light blue
grd.addColorStop(.6, "#3E191E");
//dark
grd.addColorStop(.4, "#190704");
context.fillStyle = grd;
context.fill();
/*context.fillStyle = 'rgb(113,71,31)';
context.fill();*/
context.stroke();
//////////inside bars
context.beginPath();
context.moveTo(384, 477);
context.lineTo(410, 475);
context.lineWidth = 5;
context.strokeStyle = 'rgb(170,117,13)';
//context.fillStyle = 'black';
// context.fill();
context.lineCap = "round";
context.stroke();
//////////////////////////////
context.beginPath();
context.moveTo(376, 513);
context.lineTo(427, 509);
context.lineWidth = 4;
context.strokeStyle = 'rgb(170,117,13)';
//context.fillStyle = 'black';
// context.fill();
context.lineCap = "round";
context.stroke();
/////////////////////////////
context.beginPath();
context.moveTo(383, 543);
context.lineTo(430, 540);
context.lineWidth = 4;
context.strokeStyle = 'rgb(170,117,13)';
//context.fillStyle = 'black';
// context.fill();
context.lineCap = "round";
context.stroke();
//////////////////// shore/////////////////
///////////bush
//////context.bezierCurveTo(controlX1, controlY1, controlX2, controlY2, endX, endY);
context.beginPath();
context.moveTo(470, 600);
context.lineTo(450, 550);
context.lineTo(460, 530);
context.lineTo(470, 550);
context.lineTo(490, 550);
context.lineTo(470, 530);
context.lineTo(520, 530);
context.lineTo(510, 540);
context.lineTo(540, 560);
context.lineTo(470, 600);
context.strokeStyle = 'rgb(172,86,49)';
var grd = context.createLinearGradient(500, 500, 500, 600);
// light
grd.addColorStop(.1, "#999966");
//dark
grd.addColorStop(.7, "#44431C");
context.fillStyle = grd;
context.fill();
context.beginPath();
context.moveTo(100, 575);
context.bezierCurveTo(200, 600, 350, 500, 500, 600);
context.bezierCurveTo(200, 800, 350, 800, 100, 575);
context.lineWidth = 7;
context.strokeStyle = 'rgb(172,86,49)';
var grd = context.createLinearGradient(240, 500, 250, 600);
// light
grd.addColorStop(.6, "#AC5631");
//dark
grd.addColorStop(.95, "#160B0A");
context.fillStyle = grd;
context.fill();
//context.fillStyle = 'black';
// context.fill();
context.stroke();
//////////////////////////
context.beginPath();
context.moveTo(400, 625);
context.bezierCurveTo(600, 500, 650, 500, 800, 500);
context.bezierCurveTo(900, 800, 850, 900, 400, 625);
context.lineWidth = 9;
context.strokeStyle = 'rgb(172,86,49)';
var grd = context.createLinearGradient(340, 500, 350, 600);
// light
grd.addColorStop(.4, "#AC5631");
//dark
grd.addColorStop(1, "#160B0A");
context.fillStyle = grd;
context.fill();
//context.fillStyle = 'black';
// context.fill();
context.stroke();
/////////////tree left
context.beginPath();
context.moveTo(200, 605);
context.lineTo(50, 550);
context.lineTo(20, 500);
context.lineTo(50, 200);
context.lineTo(70, 220);
context.lineTo(60, 230);
context.lineTo(200, 300);
context.lineTo(250, 270);
context.lineTo(200, 270);
context.lineTo(130, 220);
context.lineTo(170, 190);
context.lineTo(100, 160);
context.lineTo(270, 100);
context.lineTo(120, 60);
context.lineTo(150, 0);
context.lineTo(0, 0);
context.lineTo(0, 600);
context.lineTo(200, 605);
context.lineWidth = 2;
context.strokeStyle = 'rgb(172,86,49)';
context.fillStyle = 'black';
context.fill();
context.stroke();
//////////////////right tree
// context.arcTo(controlX,controlY,endX,endY,radius);
context.beginPath();
context.moveTo(705, 605);
context.lineTo(750, 550);
context.lineTo(780, 450);
context.lineTo(790, 350);
context.lineTo(800, 250);
context.lineTo(820, 650);
context.lineTo(705, 605);
context.lineWidth = 4;
context.strokeStyle = 'rgb(172,86,49)';
var grd = context.createLinearGradient(500, 300, 800, 300);
// light
grd.addColorStop(.6, "#AC5631");
//dark
grd.addColorStop(1, "#160B0A");
context.fillStyle = grd;
context.fill();
//context.fillStyle = 'black';
// context.fill();
context.stroke();
////////////////////////////////
context.beginPath();
context.moveTo(805, 305);
context.lineTo(600, 350);
context.lineTo(570, 330);
context.lineTo(610, 330);
context.lineTo(720, 280);
context.lineTo(680, 260);
context.lineTo(805, 140);
context.lineTo(805, 305);
context.lineWidth = 4;
context.strokeStyle = 'rgb(172,86,49)';
context.fillStyle = 'black';
context.fill();
context.stroke();
//////////////////moon
context.beginPath();
context.arc(490, 50, 25, 10, 0, true)
context.fillStyle = 'A492A0';
context.fill();
///////////////////
context.beginPath();
context.arc(490, 50, 25, 1, 4, false)
context.quadraticCurveTo(465, 70, 505, 70);
context.lineWidth = 2;
//context.fillStyle = 'FFFCED';
var grd = context.createLinearGradient(465, 70, 485, 50);
// light
grd.addColorStop(0, "#F4D2CB");
// mdium
grd.addColorStop(.45, "#FFFCED");
//dark
grd.addColorStop(.9, "#F4D2CB");
context.fillStyle = grd;
context.fill();
/////////////////// stars
////////startX, startY, startRadius, endX, endY, endRadius
var x = 380;
var y = 30;
var r = 3;
//var x2 = 400
//var y2 = 200
var sa = 10
var ea = 0
var i = 50
context.beginPath();
context.arc( x, y, 1, sa, ea, true);
context.fillStyle = 'FFFCED';
context.fill();
context.beginPath();
context.arc( x, y+i*1.5, 1, sa, ea, true);
context.fillStyle = 'FFFCED';
context.fill();
context.beginPath();
context.arc( x+i*1.3, y+i*1.2, 1, sa, ea, true);
context.fillStyle = 'FFFCED';
context.fill();
context.beginPath();
context.arc( x+i*3.3, y+i*1.2, 1, sa, ea, true);
context.fillStyle = 'FFFCED';
context.fill();
context.beginPath();
context.arc( x+i*5.3, y+i*1, 1, sa, ea, true);
context.fillStyle = 'FFFCED';
context.fill();
context.beginPath();
context.arc( x+i*7.3, y+i*.5, 1, sa, ea, true);
context.fillStyle = 'FFFCED';
context.fill();
context.beginPath();
context.arc( x+i*6.3, y+i*.2, 1, sa, ea, true);
context.fillStyle = 'FFFCED';
context.fill();
context.beginPath();
context.arc( x+i*5.3, y+i*.5, 1, sa, ea, true);
context.fillStyle = 'FFFCED';
context.fill();
context.beginPath();
context.arc( x+i*3.3, y+i*.5, 1, sa, ea, true);
context.fillStyle = 'FFFCED';
context.fill();
context.beginPath();
context.arc( x-i*4.3, y+i*.5, 1, sa, ea, true);
context.fillStyle = 'FFFCED';
context.fill();
context.beginPath();
context.arc( x-i*3, y+i*1, 1, sa, ea, true);
context.fillStyle = 'FFFCED';
context.fill();
context.beginPath();
context.arc( x-i*3, y-i*.5, 1, sa, ea, true);
context.fillStyle = 'FFFCED';
context.fill();
context.beginPath();
context.arc( x-i*3, y-i*.5, 1, sa, ea, true);
context.fillStyle = 'FFFCED';
context.fill();
context.beginPath();
context.arc( x-i*3.5, y-i*.2, 1, sa, ea, true);
context.fillStyle = 'FFFCED';
context.fill();
context.beginPath();
context.arc( x-i*4.5, y-i*.2, 1, sa, ea, true);
context.fillStyle = 'FFFCED';
context.fill();
context.beginPath();
context.arc( x-i*1.5, y-i*.2, 1, sa, ea, true);
context.fillStyle = 'FFFCED';
context.fill();
context.beginPath();
context.arc( x-i*2.5, y-i*.3, 1, sa, ea, true);
context.fillStyle = 'FFFCED';
context.fill();
context.beginPath();
context.arc( x-i*2.5, y, 1, sa, ea, true);
context.fillStyle = 'FFFCED';
context.fill();
context.beginPath();
context.arc( x-i*1, y+i*.5, 1, sa, ea, true);
context.fillStyle = 'FFFCED';
context.fill();
context.beginPath();
context.arc( x-i*2, y+i*.5, 1, sa, ea, true);
context.fillStyle = 'FFFCED';
context.fill();
context.beginPath();
context.arc( x+i*4.5, y-i*.2, 1, sa, ea, true);
context.fillStyle = 'FFFCED';
context.fill();
context.beginPath();
context.arc( x+i*4, y-i*.3, 1, sa, ea, true);
context.fillStyle = 'FFFCED';
context.fill();
context.beginPath();
context.arc( x+i*3, y-i*.3, 1, sa, ea, true);
context.fillStyle = 'FFFCED';
context.fill();
context.beginPath();
context.arc( x+i*2, y-i*.3, 1, sa, ea, true);
context.fillStyle = 'FFFCED';
context.fill();
context.beginPath();
context.arc( x+i*1, y-i*.3, 1, sa, ea, true);
context.fillStyle = 'FFFCED';
context.fill();
context.beginPath();
context.arc( x+i*1.5, y-i*.3, 1, sa, ea, true);
context.fillStyle = 'FFFCED';
context.fill();
context.beginPath();
context.arc( x+i*.2, y-i*.3, 1, sa, ea, true);
context.fillStyle = 'FFFCED';
context.fill();
context.beginPath();
context.arc( x+i*7, y-i*.3, 1, sa, ea, true);
context.fillStyle = 'FFFCED';
context.fill();
context.beginPath();
context.arc( x+i*7.5, y-i*.3, 1, sa, ea, true);
context.fillStyle = 'FFFCED';
context.fill();
context.beginPath();
context.arc( x+i*6, y-i*.3, 1, sa, ea, true);
context.fillStyle = 'FFFCED';
context.fill();
context.beginPath();
context.arc( x+i*5, y-i*.3, 1, sa, ea, true);
context.fillStyle = 'FFFCED';
context.fill();
context.beginPath();
context.arc( x+i*5.5, y-i*.1, 1, sa, ea, true);
context.fillStyle = 'FFFCED';
context.fill();
context.beginPath();
context.arc( x+i*6.5, y-i*.4, 1, sa, ea, true);
context.fillStyle = 'FFFCED';
context.fill();
context.beginPath();
context.arc( x+i*6.5, y+i*.4, 1, sa, ea, true);
context.fillStyle = 'FFFCED';
context.fill();
context.beginPath();
context.arc( x+i*6.5, y+i*1.4, 1, sa, ea, true);
context.fillStyle = 'FFFCED';
context.fill();
context.beginPath();
context.arc( x+i*5.5, y+i*.4, 1, sa, ea, true);
context.fillStyle = 'FFFCED';
context.fill();
context.beginPath();
context.arc( x+i*4.5, y+i*.4, 1, sa, ea, true);
context.fillStyle = 'FFFCED';
context.fill();
context.beginPath();
context.arc( x+i*4, y+i*.4, 1, sa, ea, true);
context.fillStyle = 'FFFCED';
context.fill();
context.beginPath();
context.arc( x+i*4, y+i*.1, 1, sa, ea, true);
context.fillStyle = 'FFFCED';
context.fill();
context.beginPath();
context.arc( x+i*3.5, y+i*.1, 1, sa, ea, true);
context.fillStyle = 'FFFCED';
context.fill();
context.beginPath();
context.arc( x-i*1, y+i*.1, 1, sa, ea, true);
context.fillStyle = 'FFFCED';
context.fill();
context.beginPath();
context.arc( x-i*.5, y+i*.1, 1, sa, ea, true);
context.fillStyle = 'FFFCED';
context.fill();
context.beginPath();
context.arc( x-i*.5, y-i*.3, 1, sa, ea, true);
context.fillStyle = 'FFFCED';
context.fill();
context.beginPath();
context.arc( x-i*.5, y+i*.7, 1, sa, ea, true);
context.fillStyle = 'FFFCED';
context.fill();
context.beginPath();
context.arc( x+i*.5, y+i*.3, 1, sa, ea, true);
context.fillStyle = 'FFFCED';
context.fill();
context.beginPath();
context.arc( x+i*.5, y+i*.9, 1, sa, ea, true);
context.fillStyle = 'FFFCED';
context.fill();
context.beginPath();
context.arc( x+i*1.3, y+i*.4, 1, sa, ea, true);
context.fillStyle = 'FFFCED';
context.fill();
context.beginPath();
context.arc( x+i*3, y+i*.7, 1, sa, ea, true);
context.fillStyle = 'FFFCED';
context.fill();
context.beginPath();
context.arc( x-i*1, y+i*2.5, 1, sa, ea, true);
context.fillStyle = 'FFFCED';
context.fill();
context.beginPath();
context.arc( x+i*1.5, y, r, sa, ea, true);
context.fillStyle = 'FFFCED';
context.fill();
context.beginPath();
context.arc( x+i*6.3, y+i*1.2, r, sa, ea, true);
context.fillStyle = 'FFFCED';
context.fill();
context.beginPath();
context.arc( x+i*8, y, r, sa, ea, true);
context.fillStyle = 'FFFCED';
context.fill();
context.beginPath();
context.arc( x+i*8, y+i, r, sa, ea, true);
context.fillStyle = 'FFFCED';
context.fill();
context.beginPath();
context.arc( x+i*5, y, r, sa, ea, true);
context.fillStyle = 'FFFCED';
context.fill();
context.beginPath();
context.arc( x+i*3.5, y-i*.5, r, sa, ea, true);
context.fillStyle = 'FFFCED';
context.fill();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</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");
//////////////sky
context.beginPath();
context.rect(0,0,800,300);
context.fillStyle = 'rgb(0,200,256)';
context.fill();
//context.stroke();
//////////////sun
context.beginPath();
context.arc(400, 300, 25, 0, 3.1, true)
context.lineWidth = 5;
context.strokeStyle = "orange"
context.fillStyle = 'orange';
context.fill();
context.stroke();
//////////////curve1
context.beginPath();
context.arc(400, 300, 50, 0, 3.1, true)
context.lineWidth = 10;
context.strokeStyle = "pink"
context.stroke();
//////////////curve2
context.beginPath();
context.arc(400, 300, 75, 0, 3.1, true)
context.lineWidth = 15;
context.strokeStyle = "yellow"
context.stroke();
//////////////curve3
context.beginPath();
context.arc(400, 300, 110, 0, 3.1, true)
context.lineWidth = 20;
context.strokeStyle = "white"
context.stroke();
//////////////curve4
context.beginPath();
context.arc(400, 300, 150, 0, 3.1, true)
context.lineWidth = 25;
context.strokeStyle = "purple"
context.stroke();
//////////////ground
context.beginPath();
context.rect(0,300,800,300);
context.fillStyle = 'rgb(0,256,100)';
context.fill();
// context.stroke();
//////////////cloud
//ontext.beginPath();
//context.arc(100, 200, 50, 0, 3.1, false)
//context.lineWidth = 10;
//context.strokeStyle = "blue"
//context. stroke();
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
//////////////sky
context.beginPath();
context.rect(0,0,800,300);
context.fillStyle = 'rgb(0,200,256)';
context.fill();
//context.stroke();
//////////////sun
context.beginPath();
context.arc(400, 300, 25, 0, 3.1, true)
context.lineWidth = 5;
context.strokeStyle = "orange"
context.fillStyle = 'orange';
context.fill();
context.stroke();
//////////////curve1
context.beginPath();
context.arc(400, 300, 50, 0, 3.1, true)
context.lineWidth = 10;
context.strokeStyle = "pink"
context.stroke();
//////////////curve2
context.beginPath();
context.arc(400, 300, 75, 0, 3.1, true)
context.lineWidth = 15;
context.strokeStyle = "yellow"
context.stroke();
//////////////curve3
context.beginPath();
context.arc(400, 300, 110, 0, 3.1, true)
context.lineWidth = 20;
context.strokeStyle = "white"
context.stroke();
//////////////curve4
context.beginPath();
context.arc(400, 300, 150, 0, 3.1, true)
context.lineWidth = 25;
context.strokeStyle = "purple"
context.stroke();
//////////////ground
context.beginPath();
context.rect(0,300,800,300);
context.fillStyle = 'rgb(0,256,100)';
context.fill();
// context.stroke();
//////////////cloud
//ontext.beginPath();
//context.arc(100, 200, 50, 0, 3.1, false)
//context.lineWidth = 10;
//context.strokeStyle = "blue"
//context. stroke();
};
</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 below this line ˇˇˇˇˇˇˇˇˇˇ
/// CANVAS BKGD
context.beginPath();
context.rect(0,0,canvas.width, canvas.height);
context.fillStyle = "white";
context.fill();
//////left ear
context.beginPath();
context.arc(300, 150, 100, -.5, 2.5, true)
context.lineWidth = 8;
context.strokeStyle = "black"
context.fillStyle = 'black';
context.fill();
context.stroke();
//right ear
context.beginPath();
context.arc(500, 150, 100, .65, -2.6, true)
context.lineWidth = 8;
context.strokeStyle = "black"
context.fillStyle = 'black';
context.fill();
context.stroke();
///////head
context.beginPath();
context.arc(400, 300, 200, 0, 3.1, true)
context.lineWidth = 8;
context.strokeStyle = "black"
context.fillStyle = 'white';
context.fill();
context.stroke();
context.beginPath();
context.arc(500, 300, 100, 0, 1.6, false)
context.stroke();
context.beginPath();
context.arc(300, 300, 100, 3.2, 1.5, true)
context.stroke();
context.beginPath();
context.moveTo(300,400);
context.lineTo(499,400);
context.stroke();
////////////////mouth
context.beginPath();
context.arc(400, 350, 35, 0, 3.1, false)
context.lineWidth = 5;
context.strokeStyle = "black"
context.fillStyle = 'rgb(249,202,202)';
context.fill();
context.stroke();
context.beginPath();
context.arc(400, 370, 40, -.5, 3.6, true)
context.lineWidth = 5;
context.strokeStyle = "black"
context.fillStyle = 'rgb(249,202,202)';
context.fill();
context.stroke();
/////eyes
// scale context horizontally
//context.scale(2, 1);
context.beginPath();
context.arc(285, 260, 50, 10, 0, true)
context.lineWidth = 5;
context.strokeStyle = "black"
context.fillStyle = 'black';
context.fill();
context.stroke();
context.beginPath();
context.arc(515, 260, 50, 10, 0, true)
context.lineWidth = 5;
context.strokeStyle = "black"
context.fillStyle = 'black';
context.fill();
context.stroke();
context.beginPath();
context.arc(500, 250, 25, 10, 0, true)
context.lineWidth = 5;
context.strokeStyle = "black"
context.fillStyle = 'rgb(205,234,249)';
context.fill();
context.stroke();
context.beginPath();
context.arc(300, 250, 25, 10, 0, true)
context.lineWidth = 5;
context.strokeStyle = "black"
context.fillStyle = 'rgb(205,234,249)';
context.fill();
context.stroke();
context.beginPath();
context.arc(507, 242, 10, 10, 0, true)
context.strokeStyle = "black"
context.fillStyle = 'white';
context.fill();
context.beginPath();
context.arc(293, 242, 10, 10, 0, true)
context.strokeStyle = "black"
context.fillStyle = 'white';
context.fill();
//context.rotate(math.PI / 4);
///////nose
context.beginPath();
context.arc(400, 320, 70, -.5, -2.6, true)
context.lineWidth = 8;
context.strokeStyle = "black"
context.lineCap = 'round';
context.stroke();
context.scale(2, 1);
context.beginPath();
context.arc(200, 300, 15, 10, 0, true)
context.lineWidth = 5;
context.strokeStyle = "black"
context.fillStyle = 'black';
context.fill();
context.stroke();
////////////////////////////////////// end above this line
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
/// CANVAS BKGD
context.beginPath();
context.rect(0,0,canvas.width, canvas.height);
context.fillStyle = "white";
context.fill();
//////left ear
context.beginPath();
context.arc(300, 150, 100, -.5, 2.5, true)
context.lineWidth = 8;
context.strokeStyle = "black"
context.fillStyle = 'black';
context.fill();
context.stroke();
//right ear
context.beginPath();
context.arc(500, 150, 100, .65, -2.6, true)
context.lineWidth = 8;
context.strokeStyle = "black"
context.fillStyle = 'black';
context.fill();
context.stroke();
///////head
context.beginPath();
context.arc(400, 300, 200, 0, 3.1, true)
context.lineWidth = 8;
context.strokeStyle = "black"
context.fillStyle = 'white';
context.fill();
context.stroke();
context.beginPath();
context.arc(500, 300, 100, 0, 1.6, false)
context.stroke();
context.beginPath();
context.arc(300, 300, 100, 3.2, 1.5, true)
context.stroke();
context.beginPath();
context.moveTo(300,400);
context.lineTo(499,400);
context.stroke();
////////////////mouth
context.beginPath();
context.arc(400, 350, 35, 0, 3.1, false)
context.lineWidth = 5;
context.strokeStyle = "black"
context.fillStyle = 'rgb(249,202,202)';
context.fill();
context.stroke();
context.beginPath();
context.arc(400, 370, 40, -.5, 3.6, true)
context.lineWidth = 5;
context.strokeStyle = "black"
context.fillStyle = 'rgb(249,202,202)';
context.fill();
context.stroke();
/////eyes
// scale context horizontally
//context.scale(2, 1);
context.beginPath();
context.arc(285, 260, 50, 10, 0, true)
context.lineWidth = 5;
context.strokeStyle = "black"
context.fillStyle = 'black';
context.fill();
context.stroke();
context.beginPath();
context.arc(515, 260, 50, 10, 0, true)
context.lineWidth = 5;
context.strokeStyle = "black"
context.fillStyle = 'black';
context.fill();
context.stroke();
context.beginPath();
context.arc(500, 250, 25, 10, 0, true)
context.lineWidth = 5;
context.strokeStyle = "black"
context.fillStyle = 'rgb(205,234,249)';
context.fill();
context.stroke();
context.beginPath();
context.arc(300, 250, 25, 10, 0, true)
context.lineWidth = 5;
context.strokeStyle = "black"
context.fillStyle = 'rgb(205,234,249)';
context.fill();
context.stroke();
context.beginPath();
context.arc(507, 242, 10, 10, 0, true)
context.strokeStyle = "black"
context.fillStyle = 'white';
context.fill();
context.beginPath();
context.arc(293, 242, 10, 10, 0, true)
context.strokeStyle = "black"
context.fillStyle = 'white';
context.fill();
//context.rotate(math.PI / 4);
///////nose
context.beginPath();
context.arc(400, 320, 70, -.5, -2.6, true)
context.lineWidth = 8;
context.strokeStyle = "black"
context.lineCap = 'round';
context.stroke();
context.scale(2, 1);
context.beginPath();
context.arc(200, 300, 15, 10, 0, true)
context.lineWidth = 5;
context.strokeStyle = "black"
context.fillStyle = 'black';
context.fill();
context.stroke();
////////////////////////////////////// end above this line
};
</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 below this line ˇˇˇˇˇˇˇˇˇˇ
/// CANVAS BKGD
context.beginPath();
context.rect(0,0,canvas.width, canvas.height);
context.fillStyle = "white";
context.fill();
////////////wing
context.beginPath();
context.moveTo(350, 205);
context.bezierCurveTo(100, -50, 500, -50, 400, 200);
context.lineWidth = 5;
context.strokeStyle = "black";
context.fillStyle = 'black';
context.fill();
context.stroke();
//////////body
context.beginPath();
context.moveTo(150, 300);
context.quadraticCurveTo(400, 500, 600, 300);
context.lineWidth = 10;
context.strokeStyle = "black";
context.fillStyle = 'yellow';
context.fill();
context.stroke();
context.beginPath();
context.moveTo(150, 305);
context.quadraticCurveTo(400, 100, 600, 305);
context.lineWidth = 10;
context.strokeStyle = "black";
context.fillStyle = 'yellow';
context.fill();
context.stroke();
////////////head
context.beginPath();
context.arc(600, 250, 75, 10, 0, true)
context.lineWidth = 10;
context.strokeStyle = "black"
context.fillStyle = 'yellow';
context.fill();
context.stroke();
///////////eyes
context.beginPath();
context.arc(625, 190, 30, 10, 0, true)
context.lineWidth = 5;
context.strokeStyle = "black"
context.fillStyle = 'rgb(237,202,249)';
context.fill();
context.stroke();
context.beginPath();
context.arc(575, 190, 30, 10, 0, true)
context.lineWidth = 5;
context.strokeStyle = "black"
context.fillStyle = 'rgb(237,202,249)';
context.fill();
context.stroke();
context.beginPath();
context.arc(575, 190, 10, 10, 0, true)
context.lineWidth = 5;
context.strokeStyle = "black"
context.fillStyle = 'black';
context.fill();
context.stroke();
context.beginPath();
context.arc(625, 190, 10, 10, 0, true)
context.lineWidth = 5;
context.strokeStyle = "black"
context.fillStyle = 'black';
context.fill();
context.stroke();
////body stripes////////
context.beginPath();
context.moveTo(156, 300);
context.bezierCurveTo(200, 350, 430, 40, 350, 360);
context.bezierCurveTo(400, 300,430, 70, 550, 340);
context.lineWidth = 10;
context.strokeStyle = "black";
context.stroke();
////leg R
context.beginPath();
context.moveTo(250, 350);
context.quadraticCurveTo(400, 500, 200, 500);
context.bezierCurveTo(50, 500, 400, 600, 300, 350);
context.quadraticCurveTo(200, 320, 250, 350);
context.lineWidth = 10;
context.strokeStyle = "black";
context.fillStyle = 'black';
context.fill();
context.closePath()
context.stroke();
////leg l
context.beginPath();
context.moveTo(500, 350);
//context.quadraticCurveTo(600, 500, 450, 500);
context.bezierCurveTo(500, 600, 450, 370, 450, 350);
context.quadraticCurveTo(500, 300, 500, 350);
context.lineWidth = 5;
context.strokeStyle = "black";
context.fillStyle = 'black';
context.fill();
context.stroke();
///////////tail
context.beginPath();
context.moveTo(150, 301);
//context.quadraticCurveTo(600, 500, 450, 500);
context.bezierCurveTo(-200, 400, 250, 300, 149, 301);
//context.quadraticCurveTo(500, 300, 500, 350);
context.lineWidth = 2;
context.strokeStyle = "black";
context.fillStyle = 'black';
context.fill();
context.stroke();
////////////mouth
context.beginPath();
context.moveTo(570, 270);
context.quadraticCurveTo(600, 300, 630, 270);
context.quadraticCurveTo(600, 350, 571, 270);
context.lineWidth = 3;
context.strokeStyle = "black";
context.fillStyle = 'pink';
context.fill();
context.stroke();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
/// CANVAS BKGD
context.beginPath();
context.rect(0,0,canvas.width, canvas.height);
context.fillStyle = "white";
context.fill();
////////////wing
context.beginPath();
context.moveTo(350, 205);
context.bezierCurveTo(100, -50, 500, -50, 400, 200);
context.lineWidth = 5;
context.strokeStyle = "black";
context.fillStyle = 'black';
context.fill();
context.stroke();
//////////body
context.beginPath();
context.moveTo(150, 300);
context.quadraticCurveTo(400, 500, 600, 300);
context.lineWidth = 10;
context.strokeStyle = "black";
context.fillStyle = 'yellow';
context.fill();
context.stroke();
context.beginPath();
context.moveTo(150, 305);
context.quadraticCurveTo(400, 100, 600, 305);
context.lineWidth = 10;
context.strokeStyle = "black";
context.fillStyle = 'yellow';
context.fill();
context.stroke();
////////////head
context.beginPath();
context.arc(600, 250, 75, 10, 0, true)
context.lineWidth = 10;
context.strokeStyle = "black"
context.fillStyle = 'yellow';
context.fill();
context.stroke();
///////////eyes
context.beginPath();
context.arc(625, 190, 30, 10, 0, true)
context.lineWidth = 5;
context.strokeStyle = "black"
context.fillStyle = 'rgb(237,202,249)';
context.fill();
context.stroke();
context.beginPath();
context.arc(575, 190, 30, 10, 0, true)
context.lineWidth = 5;
context.strokeStyle = "black"
context.fillStyle = 'rgb(237,202,249)';
context.fill();
context.stroke();
context.beginPath();
context.arc(575, 190, 10, 10, 0, true)
context.lineWidth = 5;
context.strokeStyle = "black"
context.fillStyle = 'black';
context.fill();
context.stroke();
context.beginPath();
context.arc(625, 190, 10, 10, 0, true)
context.lineWidth = 5;
context.strokeStyle = "black"
context.fillStyle = 'black';
context.fill();
context.stroke();
////body stripes////////
context.beginPath();
context.moveTo(156, 300);
context.bezierCurveTo(200, 350, 430, 40, 350, 360);
context.bezierCurveTo(400, 300,430, 70, 550, 340);
context.lineWidth = 10;
context.strokeStyle = "black";
context.stroke();
////leg R
context.beginPath();
context.moveTo(250, 350);
context.quadraticCurveTo(400, 500, 200, 500);
context.bezierCurveTo(50, 500, 400, 600, 300, 350);
context.quadraticCurveTo(200, 320, 250, 350);
context.lineWidth = 10;
context.strokeStyle = "black";
context.fillStyle = 'black';
context.fill();
context.closePath()
context.stroke();
////leg l
context.beginPath();
context.moveTo(500, 350);
//context.quadraticCurveTo(600, 500, 450, 500);
context.bezierCurveTo(500, 600, 450, 370, 450, 350);
context.quadraticCurveTo(500, 300, 500, 350);
context.lineWidth = 5;
context.strokeStyle = "black";
context.fillStyle = 'black';
context.fill();
context.stroke();
///////////tail
context.beginPath();
context.moveTo(150, 301);
//context.quadraticCurveTo(600, 500, 450, 500);
context.bezierCurveTo(-200, 400, 250, 300, 149, 301);
//context.quadraticCurveTo(500, 300, 500, 350);
context.lineWidth = 2;
context.strokeStyle = "black";
context.fillStyle = 'black';
context.fill();
context.stroke();
////////////mouth
context.beginPath();
context.moveTo(570, 270);
context.quadraticCurveTo(600, 300, 630, 270);
context.quadraticCurveTo(600, 350, 571, 270);
context.lineWidth = 3;
context.strokeStyle = "black";
context.fillStyle = 'pink';
context.fill();
context.stroke();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>