Molly Imrie Graphic Design: September 2015

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> here goes the title of your project </title>

<style type="text/css">
body,td,th {
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
color: #000;
}
body {
background-color: #FFF;
}
#myCanvas { border: rgb(102,0,255) medium dashed; }
</style>
</head>

<body>

<canvas id="myCanvas" width="800" height="600"></canvas>

<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

//// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> START HERE

var background = context.createLinearGradient(0,0, canvas.width, canvas.height);
context.beginPath();

background.addColorStop(0,"rgb(204,255,209)");
background.addColorStop(0.25, "rgb(204,255,255)");
background.addColorStop(0.5,"rgb(204,204,255)");
background.addColorStop(1, "rgb(229,204,255)");
background.addColorStop(0.75,"rgb(255,255,204)");

context.rect(0,0, canvas.width, canvas.height);

context.fillStyle = background;
context.fill();
context.closePath();

///////////hair

var hair = context.createLinearGradient(0,0, canvas.width, canvas.height);

hair.addColorStop(0.5,"rgb(92,26,26)");
hair.addColorStop(0.20,"rgb(153,0,0)");
hair.addColorStop(0.15,"rgb(102,51,0)");

context.beginPath();
context.moveTo(150,270);
context.quadraticCurveTo(100,100,350,40);
context.quadraticCurveTo(600,100,550,270);
context.quadraticCurveTo(350,100,150,270);
context.fillStyle = hair;
context.fill();

context.stroke();
context.closePath();

//lines on hair
context.beginPath();

context.moveTo(160,250);
context.bezierCurveTo(100,100,300,100,300,50);
context.stroke();
context.closePath();
////

context.beginPath();

context.moveTo(170,250);
context.bezierCurveTo(110,110,310,110,310,60);
context.stroke();
context.closePath();

////
context.beginPath();

context.moveTo(180,240);
context.bezierCurveTo(120,120,320,120,320,70);
context.stroke();
context.closePath();
///

////
context.beginPath();

context.moveTo(190,230);
context.bezierCurveTo(130,130,330,130,330,60);
context.stroke();
context.closePath();
///
context.beginPath();

context.moveTo(190,230);
context.bezierCurveTo(130,130,330,130,330,60);
context.stroke();
context.closePath();

///
context.beginPath();

context.moveTo(200,220);
context.bezierCurveTo(140,140,340,140,340,70);
context.stroke();
context.closePath();

///
context.beginPath();

context.moveTo(200,230);
context.bezierCurveTo(150,150,350,150,350,80);
context.stroke();
context.closePath();

////
context.beginPath();

context.moveTo(200,200);
context.bezierCurveTo(200,150,350,150,350,80);
context.stroke();
context.closePath();
////
context.beginPath();
context.moveTo(200,230);
context.bezierCurveTo(200,160,360,160,360,90);
context.stroke();
context.closePath();
///

context.beginPath();
context.moveTo(240,230);
context.bezierCurveTo(200,170,360,170,360,100);
context.stroke();
context.closePath();
////
context.beginPath();
context.moveTo(260,230);
context.bezierCurveTo(200,180,360,180,360,110);
context.stroke();
context.closePath();
//
context.beginPath();
context.moveTo(290,230);
context.bezierCurveTo(200,190,360,190,360,110);
context.stroke();
context.closePath();

///OTHER DIRECTION
context.beginPath();
context.moveTo(550,250);
context.bezierCurveTo(550,150,550,150,450,80);
context.stroke();
context.closePath();
////

context.beginPath();
context.moveTo(540,250);
context.bezierCurveTo(540,140,540,140,440,70);
context.stroke();
context.closePath();

////
context.beginPath();
context.moveTo(530,250);
context.bezierCurveTo(530,130,530,140,430,80);
context.stroke();
context.closePath();

///////
context.beginPath();
context.moveTo(520,240);
context.bezierCurveTo(520,130,520,140,420,90);
context.stroke();
context.closePath();
///
///////
context.beginPath();
context.moveTo(510,230);
context.bezierCurveTo(510,130,510,150,400,80);
context.stroke();
context.closePath();

/////

context.beginPath();
context.moveTo(500,220);
context.bezierCurveTo(500,130,500,150,400,80);
context.stroke();
context.closePath();

////

context.beginPath();
context.moveTo(490,210);
context.bezierCurveTo(490,130,490,150,410,80);
context.stroke();
context.closePath();

///

context.beginPath();
context.moveTo(480,200);
context.bezierCurveTo(480,150,480,160,400,80);
context.stroke();
context.closePath();

///

context.beginPath();
context.moveTo(470,200);
context.bezierCurveTo(470,150,450,160,380,80);
context.stroke();
context.closePath();

///

context.beginPath();
context.moveTo(460,200);
context.bezierCurveTo(470,150,440,160,380,80);
context.stroke();
context.closePath();

//

context.beginPath();
context.moveTo(450,200);
context.bezierCurveTo(460,150,430,160,370,80);
context.stroke();
context.closePath();

//

context.beginPath();
context.moveTo(440,200);
context.bezierCurveTo(450,150,420,160,360,80);
context.stroke();
context.closePath();

///

context.beginPath();
context.moveTo(430,200);
context.bezierCurveTo(440,150,410,160,360,80);
context.stroke();
context.closePath();

//
context.beginPath();
context.moveTo(420,190);
context.bezierCurveTo(430,150,400,160,360,80);
context.stroke();
context.closePath();

//
context.beginPath();
context.moveTo(410,190);
context.bezierCurveTo(420,150,390,160,360,100);
context.stroke();
context.closePath();
//
context.beginPath();
context.moveTo(400,190);
context.bezierCurveTo(400,150,370,160,360,100);
context.stroke();
context.closePath();

//

context.beginPath();
context.moveTo(390,190);
context.bezierCurveTo(390,150,350,160,360,100);
context.stroke();
context.closePath();
//
context.beginPath();
context.moveTo(370,180);
context.bezierCurveTo(380,150,340,160,365,100);
context.stroke();
context.closePath();

//
context.beginPath();
context.moveTo(350,180);
context.bezierCurveTo(380,150,340,160,365,100);
context.stroke();
context.closePath();
//
context.beginPath();
context.moveTo(330,180);
context.bezierCurveTo(370,150,340,160,365,100);
context.stroke();
context.closePath();
//
context.beginPath();
context.moveTo(310,180);
context.bezierCurveTo(360,150,340,160,365,100);
context.stroke();
context.closePath();

///BUUUUNNNN

var hair = context.createLinearGradient(0,0, canvas.width, canvas.height);

hair.addColorStop(0.5,"rgb(92,26,26)");
hair.addColorStop(0.20,"rgb(153,0,0)");
hair.addColorStop(0.15,"rgb(102,51,0)");

context.beginPath();
context.moveTo(250,80);
context.quadraticCurveTo(275,-20,350,0);
context.quadraticCurveTo(400,-20,440,75);
context.fillStyle = hair;
context.fill();
context.stroke();
context.closePath();

///band around bun

context.beginPath();
context.moveTo (255,70);
context.lineTo(440,70);
context.lineTo(440,80);
context.lineTo(250,80);
context.lineTo(255,70);
context.fillStyle = "black";
context.fill();
context.stroke();
context.closePath();

///face
context.beginPath();
context.moveTo(150,270);
context.quadraticCurveTo(250,550,400,500);
context.quadraticCurveTo(490,430,550,270);
context.quadraticCurveTo(350,100,150,270);
context.fillStyle = "rgb(255,204,153)";
context.fill();
context.stroke();
context.closePath();

//body of camera//

var camerabody = context.createLinearGradient(0,0, canvas.width, canvas.height);

camerabody.addColorStop(0.25,"rgb(255,255,255)");
camerabody.addColorStop(0.75,"rgb(255,255,153)");
camerabody.addColorStop(0.25,"rgb(240,174,174)");

context.beginPath();

context.moveTo(200,200);
context.lineTo(500,200);
context.lineTo(500,420);
context.lineTo(510,430);
context.lineTo(190,430);
context.lineTo(200,420);
context.lineTo(200,200);
context.fillStyle = camerabody;
context.fill();
context.stroke();
context.closePath();

//bottom half of camera
context.beginPath();

context.moveTo(190,430);
context.lineTo(215,500);
context.lineTo(490,500);
context.lineTo(510,430);
context.lineTo(190,430);
context.fillStyle = "black";
context.fill();
context.stroke();
context.closePath();

//lense outer
context.beginPath();
context.arc(350,310,80,0,Math.PI,true);
context.fillStyle = "black";
context.fill();
context.stroke();
context.closePath();

context.beginPath();
context.arc(350,310,80,0,Math.PI,false);
context.fillStyle = "black";
context.fill();
context.stroke();
context.closePath();

//lense middle
context.beginPath();
context.arc(350,310,60,0,Math.PI,true);
context.fillStyle = "rgb(128,128,128)";
context.fill();
context.stroke();
context.closePath();

context.beginPath();
context.arc(350,310,60,0,Math.PI,false);
context.fillStyle = "rgb(128,128,128)";
context.fill();
context.stroke();
context.closePath();

//lense smallest
var camerabody = context.createLinearGradient(0,0, canvas.width, canvas.height);

camerabody.addColorStop(0.5,"rgb(192,192,192)");
camerabody.addColorStop(0.25,"rgb(0,153,153)");
camerabody.addColorStop(0.75,"rgb(224,224,224)");

context.beginPath();
context.arc(350,310,40,0,Math.PI,true);
context.fillStyle = camerabody;
context.fill();
context.stroke();
context.closePath();

var camerabody = context.createLinearGradient(0,0, canvas.width, canvas.height);

camerabody.addColorStop(0.5,"rgb(192,192,192)");
camerabody.addColorStop(0.25,"rgb(0,153,153)");
camerabody.addColorStop(0.75,"rgb(224,224,224)");

context.beginPath();
context.arc(350,310,40,0,Math.PI,false);
context.fillStyle = camerabody;
context.fill();
context.stroke();
context.closePath();

///bottom film strip

context.beginPath();
context.moveTo(215,460);
context.lineTo(485,460);
context.lineTo(485,480);
context.lineTo(215,480);
context.lineTo(215,460);
context.fillStyle = "rgb(91,83,81)";
context.fill();
context.stroke();
context.closePath();

//button
context.beginPath();
context.arc(250,390,20,0,Math.PI,true);
context.fillStyle = "red";
context.fill();
context.stroke();
context.closePath();

context.beginPath();
context.arc(250,390,20,0,Math.PI,false);
context.fillStyle = "red";
context.fill();
context.stroke();
context.closePath();

///peep hole

var peephole = context.createLinearGradient(5,11, canvas.width, canvas.height);

peephole.addColorStop(1,"rgb(255,255,153)");
peephole.addColorStop(0.25,"rgb(192,192,192)");
peephole.addColorStop(0.25,"rgb(255,255,255)");

context.beginPath();
context.moveTo(420,210);
context.lineTo(490,210);
context.lineTo(490,260);
context.lineTo(420,260);
context.lineTo(420,210);
context.fillStyle = peephole;
context.fill();
context.stroke();
context.closePath();

///middle color line 1 yellow

context.beginPath();
context.moveTo(350,390);
context.lineTo(350,430);
context.lineTo(360,430);
context.lineTo(355,390);
context.lineTo(360,390);
context.fillStyle = "yellow";
context.fill();
context.stroke();
context.closePath();

///middle color line 2 blue

context.beginPath();
context.moveTo(355,390);
context.lineTo(355,430);
context.lineTo(360,430);
context.lineTo(360,390);
context.lineTo(355,390);
context.fillStyle = "rgb(102,255,255)";
context.fill();
context.stroke();
context.closePath();

//middle color line 3 pink

context.beginPath();
context.moveTo(345,390);
context.lineTo(345,430);
context.lineTo(350,430);
context.lineTo(350,390);
context.lineTo(345,390);
context.fillStyle = "pink";
context.fill();
context.stroke();
context.closePath();

//textttttt

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

context.font = 'bold 10pt Tahoma';
context.fillText('Polaroid Land Camera', 290,450);

//neck
context.beginPath();
context.moveTo(310,500);
context.lineTo(310,550);
context.lineTo(350,600);
context.lineTo(395,550);
context.lineTo(395,500);
context.quadraticCurveTo(370,510,310,500);
context.fillStyle = "rgb(255,204,153)";
context.fill();
context.stroke();
context.closePath();

//shirt
context.beginPath();
context.moveTo(310,550);
context.lineTo(150,570);
context.lineTo(100,600);
context.lineTo(600,600);
context.lineTo(560,570);
context.lineTo(395,550);
context.lineTo(350,600);
context.lineTo(310,550);
context.fillStyle = "rgb(204,255,255)";
context.fill();
context.stroke();
context.closePath();

///tripod

context.beginPath();
context.moveTo(340,500);
context.lineTo(340,600);
context.lineTo(360,600);
context.lineTo(360,500);
context.lineTo(340,500);
context.fillStyle = "black";
context.fill();

context.stroke();
context.closePath();

//polaroid

context.beginPath();
context.moveTo(225,460);
context.quadraticCurveTo(250,500,250,550);
context.lineTo(480,550);
context.quadraticCurveTo(490,500,460,460);
context.lineTo(225,460);
context.fillStyle = "white";
context.fill();
context.stroke();
context.closePath();

//inner polaroid

context.beginPath();
context.moveTo(240,460);
context.quadraticCurveTo(270,500,265,530);
context.lineTo(470,530);
context.quadraticCurveTo(470,500,450,460);
context.lineTo(240,460);
context.fillStyle = "grey";
context.fill();
context.stroke();
context.closePath();

//little polaroid 1

context.beginPath();
context.moveTo(550,100);
context.lineTo(600,200);
context.lineTo(710,190);
context.lineTo(660,95);
context.lineTo(550,100);
context.fillStyle = "rgb(255,255,153)";
context.fill();
context.stroke();
context.closePath();

context.beginPath();
context.moveTo(570,110);
context.lineTo(600,170);
context.lineTo(685,165);
context.lineTo(655,105);
context.lineTo(570,110);
context.fillStyle = "rgb(224,224,224)";
context.fill();
context.stroke();
context.closePath();

////little poloroid 2////

context.beginPath();
context.moveTo(600,300);
context.lineTo(750,330);
context.lineTo(720,460);
context.lineTo(570,430);
context.lineTo(600,300);
context.fillStyle = "rgb(153,204,255)";
context.fill();
context.stroke();
context.closePath();

context.beginPath();
context.moveTo(610,320);
context.lineTo(730,345);
context.lineTo(715,410);
context.lineTo(595,387);
context.lineTo(610,320);
context.fillStyle = "rgb(224,224,224)";
context.fill();
context.stroke();
context.closePath();

//// <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< END HERE

</script>
</body>
</html>

This is my first canvas object drawing ever!!!!

//// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> START HERE

var background = context.createLinearGradient(0,0, canvas.width, canvas.height);

context.beginPath();

background.addColorStop(0,"blue");

background.addColorStop(0.25, "pink");

background.addColorStop(0.5,"yellow");

background.addColorStop(0.75, "pink");

background.addColorStop(1,"blue");

context.rect(0,0, canvas.width, canvas.height);

context.fillStyle = background;

context.fill();

context.closePath();

var house = context.createLinearGradient(0,0, canvas.width, canvas.height);

///// big square of house

context.beginPath();

context.moveTo(150,200);

context.lineTo(450,200);

context.lineTo(450,600);

context.lineTo(150,600);

context.lineTo(150,200);

context.lineWidth = 10;

context.strokeStyle = "rgb(0,0,0)"

context.lineCap = "round";

context.stroke();

house.addColorStop(0.25,"blue");

house.addColorStop(0.5,"pink");

house.addColorStop(0.75,"yellow");

context.fillStyle = house;

context.fill();

context.closePath();

///// Triangle Roof

var roof = context.createLinearGradient(0,0, canvas.width, canvas.height);

context.beginPath();

context.moveTo(150,200);

context.lineTo(300,50);

context.lineTo(450,200);

context.lineTo(150,200);

context.lineWidth = 10;

context.strokeStyle = "rgb(0,0,0)"

context.lineCap = "round";

context.stroke();

roof.addColorStop(0.25,"rgb(240,16,212)");

roof.addColorStop(0.5,"rgb(36,240,220)");

context.fillStyle = roof;

context.fill();

context.closePath();

////// Door of House

var door = context.createLinearGradient(0,0, canvas.width, canvas.height);

context.beginPath();

context.moveTo(250,450);

context.lineTo(350,450);

context.lineTo(350,600);

context.lineTo(250,600);

context.lineTo(250,450);

context.lineWidth = 5;

context.strokeStyle = "rgb(0,0,0)"

context.stroke();

door.addColorStop(0.25,"rgb(210,111,104)");

door.addColorStop(0.5,"rgb(220,230,127)");

door.addColorStop(1,"rgb(242,86,128)");

door.addColorStop(0.7,"rgb(46,235,203)");

context.fillStyle = door;

context.fill();

context.closePath();

//// first window

var happy = context.createLinearGradient(0,0, canvas.width, canvas.height);

context.beginPath();

context.moveTo(175,250);

context.lineTo(275,250);

context.lineTo(275,350);

context.lineTo(175,350);

context.lineTo(175,250);

context.lineWidth = 3;

context.strokeStyle = "rgb(0,0,0)";

context.stroke();

happy.addColorStop(0.5,"yellow");

happy.addColorStop(0.25,"rgb(232,14,87)");

context.fillStyle = happy;

context.fill();

context.closePath();

///// window 2

var happy = context.createLinearGradient(0,0, canvas.width, canvas.height);

context.beginPath();

context.moveTo(325,250);

context.lineTo(425,250);

context.lineTo(425,350);

context.lineTo(325,350);

context.lineTo(325,250);

context.lineWidth = 3;

context.strokeStyle = "rgb(0,0,0)";

context.stroke();

happy.addColorStop(0.3,"yellow");

happy.addColorStop(0.8,"rgb(232,14,87)");

context.fillStyle = happy;

context.fill();

context.closePath();

////attempt at a sun face//

var sunface = context.createLinearGradient(0,0, canvas.width, canvas.height);

context.beginPath();

context.arc(650,150,100,0,Math.PI,true);

context.stroke();

sunface.addColorStop(0.3,"yellow");

sunface.addColorStop(0.8,"rgb(232,14,87)");

context.fillStyle = sunface;

context.fill();

context.closePath();

////bottom half

var smile = context.createLinearGradient(0,0, canvas.width, canvas.height);

context.beginPath();

context.arc(650,150,100,0,Math.PI,false);

context.stroke();

smile.addColorStop(0.3,"yellow");

smile.addColorStop(0.8,"rgb(232,14,87)");

context.fillStyle = smile;

context.fill();

context.closePath();

/////smiley

context.beginPath();

context.arc(650,140,75,0,Math.PI,false);

context.stroke();

context.closePath();

//left eye

var eye = context.createLinearGradient(0,0, canvas.width, canvas.height);

context.beginPath();

context.arc(610,110,10,0,Math.PI,true);

context.stroke();

eye.addColorStop(0.3,"green");

eye.addColorStop(0.8,"blue");

context.fillStyle = eye;

context.fill();

context.closePath();

var eye = context.createLinearGradient(0,0, canvas.width, canvas.height);

context.beginPath();

context.arc(610,110,10,0,Math.PI,false);

context.stroke();

eye.addColorStop(0.3,"green");

eye.addColorStop(0.8,"blue");

context.fillStyle = yippee;

context.fill();

context.closePath();

///right eye

var eye = context.createLinearGradient(0,0, canvas.width, canvas.height);

context.beginPath();

context.arc(685,110,10,0,Math.PI,true);

context.stroke();

eye.addColorStop(0.3,"yellow");

eye.addColorStop(0.8,"blue");

context.fillStyle = eye;

context.fill();

context.closePath();

var yippee = context.createLinearGradient(0,0, canvas.width, canvas.height);

context.beginPath();

context.arc(685,110,10,0,Math.PI,false);

context.stroke();

yippee.addColorStop(0.3,"yellow");

yippee.addColorStop(0.8,"blue");

context.fillStyle = yippee;

context.fill();

context.closePath();

//// <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< END HERE

Molly Imrie Graphic Design

Tuesday, September 29, 2015

Final Canvas Project ; Polaroid

Thursday, September 24, 2015

Illustrator Homework; Fall Scene

Thursday, September 17, 2015

Patrick; Canvas

Thursday, September 10, 2015

FIRST CANVAS EVER!!!