The coding I noticed was both relatively easy and very difficult at the same time. Even with some copy and pasting, it takes a while to put it all together. Patience is truly key when it comes down to working with code. I have never been one to rush, but even I became frustrated with how long the coding and edits took. I believe I could work with code if I tried, however, I would prefer not to.
This is my coding for the shown image.
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
//sky
var x = 0;
var y = 0;
var width = 800;
var height = 600;
context.beginPath();
context.rect(x,y,width,height);
context.fillStyle = 'green';
// add linear gradient
var grd = context.createLinearGradient(200, 100, 200, 350);
// dark blue
grd.addColorStop(0, "#004CB3");
// light blue
grd.addColorStop(1, "#8ED6FF");
context.fillStyle = grd;
context.fill();
//create sun
var centerX = canvas.width / 10;
var centerY = canvas.height / 12;
var radius = 100;
var startangle = 0;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
// context.fillStyle = "green";
var grd=context.createRadialGradient(centerX, centerY, 10, centerX, centerY, 100);
grd.addColorStop(0, "red");
grd.addColorStop(1, "yellow");
context.fillStyle = grd;
context.fill();
//TREE TRUNK
context.beginPath();
context.rect(240, 550, 20, 50);
context.fillStyle = 'brown';
context.fill();
context.lineWidth = 5;
context.strokeStyle = 'brown';
context.stroke();
//////tree top
var x = 250;
var y = 150;
var x1 = 320;
var y1 = 430;
var x2 = 180;
var y2 = 410;
var x3 = 250;
var y3 = 150;
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1);
context.lineTo(x2, y2);
context.lineTo(x3, y3);
context.fillStyle = 'green';
context.fill();
context.strokeStyle = 'green';
context.stroke();
//////tree bottom
var x = 250;
var y = 200;
var x1 = 330;
var y1 = 550;
var x2 = 170;
var y2 = 560;
var x3 = 250;
var y3 = 200;
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1);
context.lineTo(x2, y2);
context.lineTo(x3, y3);
context.fillStyle = 'green';
context.fill();
context.strokeStyle = 'green';
context.stroke();
/////Clouds
var centerX = canvas.width / 1.5;
var centerY = canvas.height / 5;
var radius = 50;
var startangle = 0;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
// context.fillStyle = "green";
var grd=context.createRadialGradient(centerX, centerY, 10, centerX, centerY, 100);
grd.addColorStop(0, "white");
grd.addColorStop(1, "white");
context.fillStyle = grd;
context.fill();
var centerX = canvas.width / 1.75;
var centerY = canvas.height / 5;
var radius = 75;
var startangle = 0;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
// context.fillStyle = "green";
var grd=context.createRadialGradient(centerX, centerY, 10, centerX, centerY, 100);
grd.addColorStop(0, "white");
grd.addColorStop(1, "white");
context.fillStyle = grd;
context.fill();
var centerX = canvas.width / 1.35;
var centerY = canvas.height / 5;
var radius = 60;
var startangle = 0;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
// context.fillStyle = "green";
var grd=context.createRadialGradient(centerX, centerY, 10, centerX, centerY, 100);
grd.addColorStop(0, "white");
grd.addColorStop(1, "white");
context.fillStyle = grd;
context.fill();
var centerX = canvas.width / 1.5;
var centerY = canvas.height / 3.75;
var radius = 65;
var startangle = 0;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
// context.fillStyle = "green";
var grd=context.createRadialGradient(centerX, centerY, 10, centerX, centerY, 100);
grd.addColorStop(0, "white");
grd.addColorStop(1, "white");
context.fillStyle = grd;
context.fill();
var centerX = canvas.width / 1.25;
var centerY = canvas.height / 4.3;
var radius = 75;
var startangle = 0;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
// context.fillStyle = "green";
var grd=context.createRadialGradient(centerX, centerY, 10, centerX, centerY, 100);
grd.addColorStop(0, "white");
grd.addColorStop(1, "white");
context.fillStyle = grd;
context.fill();
//my body
var x = 600;
var y = 400;
var x1 = 660;
var y1 = 650;
var x2 = 450;
var y2 = 660;
var x3 = 600;
var y3 = 400;
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1);
context.lineTo(x2, y2);
context.lineTo(x3, y3);
context.fillStyle = 'black';
context.fill();
context.strokeStyle = 'black';
context.stroke();
//my head
var centerX = canvas.width / 1.28;
var centerY = canvas.height / 1.6;
var radius = 50;
var startangle = 0;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
// context.fillStyle = "green";
var grd=context.createRadialGradient(centerX, centerY, 0, centerX, centerY, 100);
grd.addColorStop(0, "brown");
grd.addColorStop(1, "yellow");
context.fillStyle = grd;
context.fill();
var centerX = canvas.width / 1.35;
var centerY = canvas.height / 1.6;
var radius = 50;
var startangle = 0;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
// context.fillStyle = "green";
var grd=context.createRadialGradient(centerX, centerY, 10, centerX, centerY, 100);
grd.addColorStop(0, "white");
grd.addColorStop(1, "pink");
context.fillStyle = grd;
context.fill();
var centerX = canvas.width / 1.35;
var centerY = canvas.height / 1.6;
var radius = 50;
var startangle = 0;
var endangle = 1 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, true);
// context.fillStyle = "green";
var grd=context.createRadialGradient(centerX, centerY, 0, centerX, centerY, 100);
grd.addColorStop(0, "brown");
grd.addColorStop(1, "yellow");
context.fillStyle = grd;
context.fill();
//my hands
var centerX = canvas.width / 1.45;
var centerY = canvas.height / 1.20;
var radius = 20;
var startangle = 0;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
// context.fillStyle = "green";
var grd=context.createRadialGradient(centerX, centerY, 10, centerX, centerY, 30);
grd.addColorStop(0, "white");
grd.addColorStop(1, "pink");
context.fillStyle = grd;
context.fill();
var centerX = canvas.width / 1.30;
var centerY = canvas.height / 1.20;
var radius = 20;
var startangle = 0;
var endangle = 2 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
// context.fillStyle = "green";
var grd=context.createRadialGradient(centerX, centerY, 1, centerX, centerY, 30);
grd.addColorStop(0, "white");
grd.addColorStop(1, "pink");
context.fillStyle = grd;
context.fill();
//my face
var centerX = canvas.width / 1.35;
var centerY = canvas.height / 1.48;
var radius = 10;
var startangle = 0;
var endangle = 1 * Math.PI;
context.beginPath();
context.arc(centerX, centerY, radius, startangle, endangle, false);
// context.fillStyle = "green";
var grd=context.createRadialGradient(centerX, centerY, 1, centerX, centerY, 30);
grd.addColorStop(0, "white");
grd.addColorStop(1, "black");
context.fillStyle = grd;
context.fill();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
I love your html portrait! It is so cute. Love how you created the hair! It has an Oriental kind of feel. I'm not sure it that term is politically correct. :/
ReplyDeleteI do love manga and oriental culture. So I suppose it did have an influence on my project. Thanks for the praise though! I'm no where near the level I would like to be at though.
Delete