I finally completed my canvas project and it turned out just
the way I pictured it in my head. I love the winter time and this picture I created
reminds me of the first time I built a snowman and played in the snow. Each day
adding more shapes, curves, and lines to my project it became clearer how to
use each code, what it represents and where to place them exactly on my canvas by
using high and low numbers as variables.
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ??????????
//Rectangle
context.beginPath();
context.rect(0, 0, canvas.width, canvas.height);
context.lineWidth = 6;
context.strokeStyle = 'grey';
context.stroke();
//Sky
context.beginPath();
context.rect(0, 0, canvas.width, canvas.height/2.1);
context.fillStyle = 'rgb(135,206,250)';
context.fill();
context.lineWidth = 6;
context.strokeStyle = 'grey';
context.stroke();
//Sun
context.beginPath();
context.arc(800, 50, 65, 0 , 2 * Math.PI, false);
context.lineWidth = 10;
context.fillStyle = 'rgb(255,200,0)';
context.fill();
context.strokeStyle = 'orange';
context.stroke();
/////Snowman Body////
//Circle 1 Bottom
context.beginPath();
context.arc(400, 456, 100, 0 , 2 * Math.PI, false);
context.lineWidth = 5;
context.fillStyle = 'rgb(255,255,255)'
context.fill();
context.strokeStyle = 'grey';
context.stroke();
//Circle 2 Middle
context.beginPath();
context.arc(400, 280, 80, 0 , 2 * Math.PI, false);
context.lineWidth = 5;
context.fillStyle = 'rgb(255,255,255)'
context.fill();
context.strokeStyle = 'grey';
context.stroke();
//Circle 2 Top
context.beginPath();
context.arc(400, 135, 68, 0 , 2 * Math.PI, false);
context.lineWidth = 5;
context.fillStyle = 'rgb(255,255,255)'
context.fill();
context.strokeStyle = 'grey';
context.stroke();
///Snowman Face////
//LEFT EYE
context.beginPath();
context.arc(380, 115, 10, 0, 2*Math.PI, false);
var grd=context.createRadialGradient(400, 300, 50, 400, 300, 200);
grd.addColorStop(0, 'rgb(0, 0, 0)');
context.fillStyle = 'rgb(0,0,0)';
context.fill();
context.lineWidth = 5;
context.strokeStyle = 'rgb(0,0,0)';
context.stroke();
//Right EYE
context.beginPath();
context.arc(420, 118, 10, 0, 2*Math.PI, false);
var grd=context.createRadialGradient(400, 300, 50, 400, 300, 200);
grd.addColorStop(0, 'rgb(0, 0, 0)');
context.fillStyle = 'rgb(0,0,0)';
context.fill();
context.lineWidth = 5;
context.strokeStyle = 'rgb(0,0,0)';
context.stroke();
//Nose
context.beginPath();
context.moveTo(350, 140);
context.lineTo(400, 150);
context.lineJoin = "round";
context.strokeStyle = 'orange'
context.lineWidth = 7;
context.stroke();
//Mouth
context.beginPath();
context.moveTo(408,169.8);
context.bezierCurveTo(440, 190, 330, 175, 410, 170);
context.strokeStyle = 'red'
context.lineWidth = 5;
context.stroke();
////Arms////
//Right Arm
context.beginPath();
context.moveTo(480,270);
context.lineTo(600,200);
context.strokeStyle = 'rgb(239,125,11)';
context.stroke();
//Little Stick 1
context.beginPath();
context.moveTo(530,240);
context.lineTo(550,180);
context.strokeStyle = 'rgb(239,125,11)';
context.stroke();
//Little Stick 2
context.beginPath();
context.moveTo(533,240);
context.lineTo(610,240);
context.strokeStyle = 'rgb(239,125,11)';
context.stroke();
//Left Arm
context.beginPath();
context.moveTo(322,270);
context.lineTo(220,190);
context.stroke();
//Little Stick 1
context.beginPath();
context.moveTo(280,235);
context.lineTo(280,180);
context.strokeStyle = 'rgb(239,125,11)';
context.stroke();
//Little Stick 2
context.beginPath();
context.moveTo(280,238);
context.lineTo(210,240);
context.strokeStyle = 'rgb(239,125,11)';
context.stroke();
//Buttons///
//Button 1
context.beginPath();
context.arc(400, 250, 3, 0, 2*Math.PI, false);
context.lineWidth = 5;
context.strokeStyle = 'rgb(0,0,0)';
context.stroke();
//Button 2
context.beginPath();
context.arc(400, 280, 3, 0, 2*Math.PI, false);
context.lineWidth = 5;
context.strokeStyle = 'rgb(0,0,0)';
context.stroke();
//Button 3
context.beginPath();
context.arc(400, 310, 3, 0, 2*Math.PI, false);
context.lineWidth = 5;
context.strokeStyle = 'rgb(0,0,0)';
context.stroke();
//Hat
context.beginPath();
context.moveTo(468,80);
context.lineTo(330,80);
context.rect(356.5, 20, 85, 60);
context.fillStyle = 'rgb(0,0,0)';
context.fill();
context.lineWidth = 8;
context.strokeStyle = 'black'
context.stroke();
//House
context.beginPath();
context.rect(10, 140, 180, 150);
context.fillStyle = 'rgb(220,120,50)';
context.strokeStyle = 'rgb(0,0,0)';
context.fill();
context.stroke();
//Door
context.beginPath();
context.rect(86, 235, 30, 50);
context.fillStyle = 'rgb(180,0,0)';
context.fill();
context.stroke();
//Window 1
context.beginPath();
context.rect(30, 160, 40, 50);
context.moveTo(70,185);
context.lineTo(30,185);
context.fillStyle = 'rgb(255,255,255)';
context.fill();
context.stroke();
//Window 2
context.beginPath();
context.rect(130, 160, 40, 50);
context.moveTo(170,185);
context.lineTo(130,185);
context.fillStyle = 'rgb(255,255,255)';
context.fill();
context.stroke();
//Roof
context.beginPath();
context.moveTo(100,50);
context.lineTo(190,140);
context.lineTo(20,140);
context.lineTo(6,140);
context.strokeStyle = 'rgb(100,0,0)';
context.fillStyle = 'rgb(100,0,0)';
context.fill();
context.stroke();
//Roof Window
context.beginPath();
context.moveTo(65,142);
context.quadraticCurveTo(105, 80, 140, 142);
context.fillStyle = 'rgb(255,255,255)';
context.fill();
context.strokeStyle = 'rgb(0,0,0)';
context.stroke();
//Tree Stump
context.beginPath();
context.rect(695, 260, 20, 28);
context.fillStyle = 'rgb(239,125,11)';
context.fill();
context.strokeStyle = 'rgb(239,125,11)';
context.stroke();
//Tree
context.beginPath();
context.moveTo(700,180);
context.lineTo(750,250);
context.lineTo(660,250);
context.lineTo(700,180);
context.lineCap = 'round';
context.fillStyle = 'green';
context.fill();
context.strokeStyle = 'green';
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 ??????????
//Rectangle
context.beginPath();
context.rect(0, 0, canvas.width, canvas.height);
context.lineWidth = 6;
context.strokeStyle = 'grey';
context.stroke();
//Sky
context.beginPath();
context.rect(0, 0, canvas.width, canvas.height/2.1);
context.fillStyle = 'rgb(135,206,250)';
context.fill();
context.lineWidth = 6;
context.strokeStyle = 'grey';
context.stroke();
//Sun
context.beginPath();
context.arc(800, 50, 65, 0 , 2 * Math.PI, false);
context.lineWidth = 10;
context.fillStyle = 'rgb(255,200,0)';
context.fill();
context.strokeStyle = 'orange';
context.stroke();
/////Snowman Body////
//Circle 1 Bottom
context.beginPath();
context.arc(400, 456, 100, 0 , 2 * Math.PI, false);
context.lineWidth = 5;
context.fillStyle = 'rgb(255,255,255)'
context.fill();
context.strokeStyle = 'grey';
context.stroke();
//Circle 2 Middle
context.beginPath();
context.arc(400, 280, 80, 0 , 2 * Math.PI, false);
context.lineWidth = 5;
context.fillStyle = 'rgb(255,255,255)'
context.fill();
context.strokeStyle = 'grey';
context.stroke();
//Circle 2 Top
context.beginPath();
context.arc(400, 135, 68, 0 , 2 * Math.PI, false);
context.lineWidth = 5;
context.fillStyle = 'rgb(255,255,255)'
context.fill();
context.strokeStyle = 'grey';
context.stroke();
///Snowman Face////
//LEFT EYE
context.beginPath();
context.arc(380, 115, 10, 0, 2*Math.PI, false);
var grd=context.createRadialGradient(400, 300, 50, 400, 300, 200);
grd.addColorStop(0, 'rgb(0, 0, 0)');
context.fillStyle = 'rgb(0,0,0)';
context.fill();
context.lineWidth = 5;
context.strokeStyle = 'rgb(0,0,0)';
context.stroke();
//Right EYE
context.beginPath();
context.arc(420, 118, 10, 0, 2*Math.PI, false);
var grd=context.createRadialGradient(400, 300, 50, 400, 300, 200);
grd.addColorStop(0, 'rgb(0, 0, 0)');
context.fillStyle = 'rgb(0,0,0)';
context.fill();
context.lineWidth = 5;
context.strokeStyle = 'rgb(0,0,0)';
context.stroke();
//Nose
context.beginPath();
context.moveTo(350, 140);
context.lineTo(400, 150);
context.lineJoin = "round";
context.strokeStyle = 'orange'
context.lineWidth = 7;
context.stroke();
//Mouth
context.beginPath();
context.moveTo(408,169.8);
context.bezierCurveTo(440, 190, 330, 175, 410, 170);
context.strokeStyle = 'red'
context.lineWidth = 5;
context.stroke();
////Arms////
//Right Arm
context.beginPath();
context.moveTo(480,270);
context.lineTo(600,200);
context.strokeStyle = 'rgb(239,125,11)';
context.stroke();
//Little Stick 1
context.beginPath();
context.moveTo(530,240);
context.lineTo(550,180);
context.strokeStyle = 'rgb(239,125,11)';
context.stroke();
//Little Stick 2
context.beginPath();
context.moveTo(533,240);
context.lineTo(610,240);
context.strokeStyle = 'rgb(239,125,11)';
context.stroke();
//Left Arm
context.beginPath();
context.moveTo(322,270);
context.lineTo(220,190);
context.stroke();
//Little Stick 1
context.beginPath();
context.moveTo(280,235);
context.lineTo(280,180);
context.strokeStyle = 'rgb(239,125,11)';
context.stroke();
//Little Stick 2
context.beginPath();
context.moveTo(280,238);
context.lineTo(210,240);
context.strokeStyle = 'rgb(239,125,11)';
context.stroke();
//Buttons///
//Button 1
context.beginPath();
context.arc(400, 250, 3, 0, 2*Math.PI, false);
context.lineWidth = 5;
context.strokeStyle = 'rgb(0,0,0)';
context.stroke();
//Button 2
context.beginPath();
context.arc(400, 280, 3, 0, 2*Math.PI, false);
context.lineWidth = 5;
context.strokeStyle = 'rgb(0,0,0)';
context.stroke();
//Button 3
context.beginPath();
context.arc(400, 310, 3, 0, 2*Math.PI, false);
context.lineWidth = 5;
context.strokeStyle = 'rgb(0,0,0)';
context.stroke();
//Hat
context.beginPath();
context.moveTo(468,80);
context.lineTo(330,80);
context.rect(356.5, 20, 85, 60);
context.fillStyle = 'rgb(0,0,0)';
context.fill();
context.lineWidth = 8;
context.strokeStyle = 'black'
context.stroke();
//House
context.beginPath();
context.rect(10, 140, 180, 150);
context.fillStyle = 'rgb(220,120,50)';
context.strokeStyle = 'rgb(0,0,0)';
context.fill();
context.stroke();
//Door
context.beginPath();
context.rect(86, 235, 30, 50);
context.fillStyle = 'rgb(180,0,0)';
context.fill();
context.stroke();
//Window 1
context.beginPath();
context.rect(30, 160, 40, 50);
context.moveTo(70,185);
context.lineTo(30,185);
context.fillStyle = 'rgb(255,255,255)';
context.fill();
context.stroke();
//Window 2
context.beginPath();
context.rect(130, 160, 40, 50);
context.moveTo(170,185);
context.lineTo(130,185);
context.fillStyle = 'rgb(255,255,255)';
context.fill();
context.stroke();
//Roof
context.beginPath();
context.moveTo(100,50);
context.lineTo(190,140);
context.lineTo(20,140);
context.lineTo(6,140);
context.strokeStyle = 'rgb(100,0,0)';
context.fillStyle = 'rgb(100,0,0)';
context.fill();
context.stroke();
//Roof Window
context.beginPath();
context.moveTo(65,142);
context.quadraticCurveTo(105, 80, 140, 142);
context.fillStyle = 'rgb(255,255,255)';
context.fill();
context.strokeStyle = 'rgb(0,0,0)';
context.stroke();
//Tree Stump
context.beginPath();
context.rect(695, 260, 20, 28);
context.fillStyle = 'rgb(239,125,11)';
context.fill();
context.strokeStyle = 'rgb(239,125,11)';
context.stroke();
//Tree
context.beginPath();
context.moveTo(700,180);
context.lineTo(750,250);
context.lineTo(660,250);
context.lineTo(700,180);
context.lineCap = 'round';
context.fillStyle = 'green';
context.fill();
context.strokeStyle = 'green';
context.stroke();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
No comments:
Post a Comment