Wednesday, February 27, 2013

Text Project

I created a dogs paw print out of quotes. The quotes are all related to a dog being mans best friend. and how they will leave an imprint (or paw print) in their owners life and truly be there for them until the end. I have a really old dog back at home who I have had for 14 years now so I have basically grown up with him and all of these quotes relate to me directly.

Monday, February 18, 2013

Logo Analysis


This is very cute because the target is the actual name and the picture of the company. It kind of demonstrates that by shopping at target its like hitting a bulls-eye and choosing the right place to go to.

The Nike check mark is known universally. It demonstrates to consumers and buyers that its the right brand or the right move to make just like how people in school would get check marks on a correct question. They use this symbol that people have known as "right: for their whole life.

Twitters whole page is set up around birds. When you sign up, you begin as an egg, that's what your picture it. Your home page button is a birds house and the company symbol is a grown bird. the connect really well all of the symbols together.

Mozilla Firefox portrays their logo very well. They get the symbol of the red "fire" fox thats taking over the world. Portraying to buyers or users that their company that their company is the best and will one day actually be the only thing used in the world... hence why the fox is taking over the globe in the logo.


The FedEx company is about moving and traveling and getting your goods from one are to another and quickly. Somethings that many people dont know about the logo is the forward arrow between the E and the X. they sneak that in there and for those who catch it, you can see they incorporate the moving forward ethics they carry into the design.


Sunday, February 17, 2013

Company Ideas

Going Green: An alternative to fast food restaurants where the food is still quick but healthy. The core of the menu are mainly fresh groan greens and whatnot but also includes healthy sandwiches and other good food choices for those on the run who don't want to support obesity.

Pet Palace: When you're planning a trip, but don't want to leave your beloved pet at some shelter based facility where they say the animal will be taken care of but you know deep down they won't, bring them to a cozy area where all we want to do is care for your animal. With the love we have for animals their own personal space, bowls, beds, and all the play time in the world will be provided, what more can an owner ask for?

Delizioso: A dessert heaven made from only the finest ingredient. You can stay and sit or grab it on the go, our specialties range from a simple chocolate bar to anything such as a tiramisu.

Platinum: A club for 18+

Curvy Q- who said curves can't be a good thing? This is a clothing line for the bustier woman who have harder times finding the right bra or size dress or shirt or jeans because something is just "not proportionate" to what society believes.

Monday, February 11, 2013

Project 1


Music has always helped me in different situations in life. I'm not a music major, but that doesn't mean I cant enjoy the same things they do. I made the design of a music equalizer which is how music looks on the computer when the composer is adjusting the balance between frequency components within an electronic signal. These devices strengthen (boost) or weaken (cut) the energy of specific frequency bands which explains the different sized bars along with the breaks between them. Something that you don't see when using this for music are they keys along the top. I added these on my own because they are very important keys to music. The play, pause, stop, fast-forward, and re-wind buttons all let the user be in control. It lets whoever in controlling the music to change it up and make it their own. I like the way the picture came out because It keeps its simplicity but is still able to convey a message of music and changing it up.


<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
var rectx= 0;
var recty= 0;
var rectwidth= 800;
var rectheight= 600;

var rectx1= 0;
var recty1= 550;
var rectwidth1= 100;
var rectheight1= 50;

var rectx2= 100;
var recty2= 400;
var rectwidth2= 100;
var rectheight2= 200;

var rectx3= 200;
var recty3= 450;
var rectwidth3= 100;
var rectheight3= 150;

var rectx4= 300;
var recty4= 250;
var rectwidth4= 100;
var rectheight4= 350;

var rectx5= 400;
var recty5= 200;
var rectwidth5= 100;
var rectheight5= 400;

var rectx6= 500;
var recty6= 350;
var rectwidth6= 100;
var rectheight6= 250;

var rectx7= 600;
var recty7= 300;
var rectwidth7= 100;
var rectheight7= 300;

var rectx8= 700;
var recty8= 150;
var rectwidth8= 100;
var rectheight8= 450;

var rectx9= 100;
var recty9= 500;
var rectwidth9= 100;
var rectheight9= 100;

var rectx10= 200;
var recty10= 500;
var rectwidth10= 100;
var rectheight10= 100;

var rectx11= 300;
var recty11= 500;
var rectwidth11= 100;
var rectheight11= 100;

var rectx12= 300;
var recty12= 400;
var rectwidth12= 100;
var rectheight12= 100;

var rectx13= 300;
var recty13= 300;
var rectwidth13= 100;
var rectheight13= 100;

var rectx14= 400;
var recty14= 500;
var rectwidth14= 100;
var rectheight14= 100;

var rectx15= 400;
var recty15= 400;
var rectwidth15= 100;
var rectheight15= 100;

var rectx16= 400;
var recty16= 300;
var rectwidth16= 100;
var rectheight16= 100;

var rectx17= 500;
var recty17= 500;
var rectwidth17= 100;
var rectheight17= 100;

var rectx18= 500;
var recty18= 400;
var rectwidth18= 100;
var rectheight18= 100;

var rectx19= 600;
var recty19= 500;
var rectwidth19= 100;
var rectheight19= 100;

var rectx20= 600;
var recty20= 400;
var rectwidth20= 100;
var rectheight20= 100;

var rectx21= 700;
var recty21= 500;
var rectwidth21= 100;
var rectheight21= 100;

var rectx22= 700;
var recty22= 400;
var rectwidth22= 100;
var rectheight22= 100;

var rectx23= 700;
var recty23= 300;
var rectwidth23= 100;
var rectheight23= 100;

var rectx24= 700;
var recty24= 200;
var rectwidth24= 100;
var rectheight24= 100;
//squares^

context.beginPath();
context.rect(rectx, recty, rectwidth, rectheight);
context.lineWidth = 300;
context.strokeStyle = 'rgb(0, 0, 0)';
context.fillStyle = 'rgb(0, 0, 0)';
context.fill();
context.stroke();
//background^
context.beginPath();
context.rect(rectx1, recty1, rectwidth1, rectheight1);
context.lineWidth = 5;
context.strokeStyle = 'rgb(0, 0, 0)';
context.fillStyle = 'rgb(250, 100, 200)';
context.fill();
context.stroke();
//bar 1^
context.beginPath();
context.rect(rectx2, recty2, rectwidth2, rectheight2);
context.lineWidth = 5;
context.strokeStyle = 'rgb(0, 0, 0)';
context.fillStyle = 'rgb(250, 250, 0)';
context.fill();
context.stroke();

context.beginPath();
context.rect(rectx9, recty9, rectwidth9, rectheight9);
context.lineWidth = 5;
context.strokeStyle = 'rgb(0, 0, 0)';
context.fillStyle = 'rgb(215, 200, 0)';
context.fill();
context.stroke();
//bar 2^
context.beginPath();
context.rect(rectx3, recty3, rectwidth3, rectheight3);
context.lineWidth = 5;
context.strokeStyle = 'rgb(0, 0, 0)';
context.fillStyle = 'rgb(0, 250, 250)';
context.fill();
context.stroke();

context.beginPath();
context.rect(rectx10, recty10, rectwidth10, rectheight10);
context.lineWidth = 5;
context.strokeStyle = 'rgb(0, 0, 0)';
context.fillStyle = 'rgb(0, 200, 200)';
context.fill();
context.stroke();
//bar 3^
context.beginPath();
context.rect(rectx4, recty4, rectwidth4, rectheight4);
context.lineWidth = 5;
context.strokeStyle = 'rgb(0, 0, 0)';
context.fillStyle = 'rgb(50, 250, 50)';
context.fill();
context.stroke();

context.beginPath();
context.rect(rectx11, recty11, rectwidth11, rectheight11);
context.lineWidth = 5;
context.strokeStyle = 'rgb(0, 0, 0)';
context.fillStyle = 'rgb(50, 100, 50)';
context.fill();
context.stroke();

context.beginPath();
context.rect(rectx12, recty12, rectwidth12, rectheight12);
context.lineWidth = 5;
context.strokeStyle = 'rgb(0, 0, 0)';
context.fillStyle = 'rgb(50, 150, 50)';
context.fill();
context.stroke();

context.beginPath();
context.rect(rectx11, recty13, rectwidth13, rectheight13);
context.lineWidth = 5;
context.strokeStyle = 'rgb(0, 0, 0)';
context.fillStyle = 'rgb(50, 200, 50)';
context.fill();
context.stroke();
//bar 4^
context.beginPath();
context.rect(rectx5, recty5, rectwidth5, rectheight5);
context.lineWidth = 5;
context.strokeStyle = 'rgb(0, 0, 0)';
context.fillStyle = 'rgb(250, 0, 0)';
context.fill();
context.stroke();

context.beginPath();
context.rect(rectx5, recty14, rectwidth14, rectheight14);
context.lineWidth = 5;
context.strokeStyle = 'rgb(0, 0, 0)';
context.fillStyle = 'rgb(100, 0, 0)';
context.fill();
context.stroke();

context.beginPath();
context.rect(rectx5, recty15, rectwidth15, rectheight15);
context.lineWidth = 5;
context.strokeStyle = 'rgb(0, 0, 0)';
context.fillStyle = 'rgb(150, 0, 0)';
context.fill();
context.stroke();

context.beginPath();
context.rect(rectx5, recty16, rectwidth16, rectheight16);
context.lineWidth = 5;
context.strokeStyle = 'rgb(0, 0, 0)';
context.fillStyle = 'rgb(200, 0, 0)';
context.fill();
context.stroke();
//bar 5^
context.beginPath();
context.rect(rectx6, recty6, rectwidth6, rectheight6);
context.lineWidth = 5;
context.strokeStyle = 'rgb(0, 0, 0)';
context.fillStyle = 'rgb(250, 175, 0)';
context.fill();
context.stroke();

context.beginPath();
context.rect(rectx17, recty17, rectwidth17, rectheight17);
context.lineWidth = 5;
context.strokeStyle = 'rgb(0, 0, 0)';
context.fillStyle = 'rgb(200, 75, 0)';
context.fill();
context.stroke();

context.beginPath();
context.rect(rectx18, recty18, rectwidth18, rectheight18);
context.lineWidth = 5;
context.strokeStyle = 'rgb(0, 0, 0)';
context.fillStyle = 'rgb(250, 100, 0)';
context.fill();
context.stroke();
//bar 6^
context.beginPath();
context.rect(rectx7, recty7, rectwidth7, rectheight7);
context.lineWidth = 5;
context.strokeStyle = 'rgb(0, 0, 0)';
context.fillStyle = 'rgb(0, 150, 250)';
context.fill();
context.stroke();

context.beginPath();
context.rect(rectx19, recty19, rectwidth19, rectheight19);
context.lineWidth = 5;
context.strokeStyle = 'rgb(0, 0, 0)';
context.fillStyle = 'rgb(0, 0, 250)';
context.fill();
context.stroke();

context.beginPath();
context.rect(rectx20, recty20, rectwidth20, rectheight20);
context.lineWidth = 5;
context.strokeStyle = 'rgb(0, 0, 0)';
context.fillStyle = 'rgb(0, 100, 250)';
context.fill();
context.stroke();
//bar 7^
context.beginPath();
context.rect(rectx8, recty8, rectwidth8, rectheight8);
context.lineWidth = 5;
context.strokeStyle = 'rgb(0, 0, 0)';
context.fillStyle = 'rgb(250, 0, 250)';
context.fill();
context.stroke();

context.beginPath();
context.rect(rectx21, recty21, rectwidth21, rectheight21);
context.lineWidth = 5;
context.strokeStyle = 'rgb(0, 0, 0)';
context.fillStyle = 'rgb(100, 0, 150)';
context.fill();
context.stroke();

context.beginPath();
context.rect(rectx22, recty22, rectwidth22, rectheight22);
context.lineWidth = 5;
context.strokeStyle = 'rgb(0, 0, 0)';
context.fillStyle = 'rgb(150, 0, 200)';
context.fill();
context.stroke();

context.beginPath();
context.rect(rectx23, recty23, rectwidth23, rectheight23);
context.lineWidth = 5;
context.strokeStyle = 'rgb(0, 0, 0)';
context.fillStyle = 'rgb(200, 0, 200)';
context.fill();
context.stroke();

context.beginPath();
context.rect(rectx24, recty24, rectwidth24, rectheight24);
context.lineWidth = 5;
context.strokeStyle = 'rgb(0, 0, 0)';
context.fillStyle = 'rgb(225, 0, 200)';
context.fill();
context.stroke();
//bar 8^

var centerX = 100;
var centerY = 100;
var radius = 50;

var centerX1 = 250;
var centerY1 = 100;
var radius1 = 50;

var centerX2 = 400;
var centerY2 = 100;
var radius2 = 50;

var centerX3 = 550;
var centerY3 = 100;
var radius3 = 50;

var centerX4 = 700;
var centerY4 = 100;
var radius4 = 50;

var x1= 75;
var y1= 75;
var x2= 75;
var y2= 125;

var x3= 75;
var y3= 75;
var x4= 125;
var y4= 100;

var x5= 125;
var y5= 100;
var x6= 75;
var y6= 125;

var x7= 525;
var y7= 75;
var x8= 525;
var y8= 125;

var x9= 550;
var y9= 100;
var x10= 525;
var y10= 75;

var x11= 550;
var y11= 100;
var x12= 525;
var y12= 125;

var x13= 550;
var y13= 75;
var x14= 550;
var y14= 125;

var x15= 550;
var y15= 125;
var x16= 575;
var y16= 100;

var x17= 575;
var y17= 100;
var x18= 550;
var y18= 75;

var x19= 700;
var y19= 75;
var x20= 675;
var y20= 100;

var x21= 675;
var y21= 100;
var x22= 700;
var y22= 125;

var x23= 700;
var y23= 75;
var x24= 700;
var y24= 125;

var x25= 700;
var y25= 100;
var x26= 725;
var y26= 75;

var x27= 725;
var y27= 75;
var x28= 725;
var y28= 125;

var x29= 725;
var y29= 125;
var x30= 700;
var y30= 100;

var rectx25= 225;
var recty25= 125;
var rectwidth25= 20;
var rectheight25= -50;

var rectx26= 255;
var recty26= 125;
var rectwidth26= 20;
var rectheight26= -50;

var rectx27= 375;
var recty27= 125;
var rectwidth27= 50;
var rectheight27= -50;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2*Math.PI, false);
context.fillStyle = 'rgb(250, 250, 250)';
context.fill();
context.strokeStyle = 'rbg(250, 250, 250)';
context.stroke();

  context.beginPath();
  context.moveTo(x1,y1);
  context.lineTo(x2,y2);
  context.lineWidth = 5;
  context.strokeStyle = 'rgb(0, 0, 0)';
  context.lineCap = 'round';
  context.stroke();
 
  context.beginPath();
  context.moveTo(x3,y3);
  context.lineTo(x4,y4);
  context.lineWidth = 5;
  context.strokeStyle = 'rgb(0, 0, 0)';
  context.lineCap = 'round';
  context.stroke();
 
  context.beginPath();
  context.moveTo(x5,y5);
  context.lineTo(x6,y6);
  context.lineWidth = 5;
  context.strokeStyle = 'rgb(0, 0, 0)';
  context.lineCap = 'round';
  context.stroke();
//circle 1^

context.beginPath();
context.arc(centerX1, centerY1, radius1, 0, 2*Math.PI, false);
context.fillStyle = 'rgb(250, 250, 250)';
context.fill();
context.strokeStyle = 'rbg(250, 250, 250)';
context.stroke();

context.beginPath();
context.rect(rectx25, recty25, rectwidth25, rectheight25);
context.lineWidth = 5;
context.strokeStyle = 'rgb(0, 0, 0)';
context.fillStyle = 'rgb(250, 250, 250)';
context.fill();
context.stroke();

context.beginPath();
context.rect(rectx26, recty26, rectwidth26, rectheight26);
context.lineWidth = 5;
context.strokeStyle = 'rgb(0, 0, 0)';
context.fillStyle = 'rgb(250, 250, 250)';
context.fill();
context.stroke();
//circle 2^

context.beginPath();
context.arc(centerX2, centerY2, radius2, 0, 2*Math.PI, false);
context.fillStyle = 'rgb(250, 250, 250)';
context.fill();
context.strokeStyle = 'rbg(250, 250, 250)';
context.stroke();

context.beginPath();
context.rect(rectx27, recty27, rectwidth27, rectheight27);
context.lineWidth = 5;
context.strokeStyle = 'rgb(0, 0, 0)';
context.fillStyle = 'rgb(250, 250, 250)';
context.fill();
context.stroke();
//circle 3^

context.beginPath();
context.arc(centerX3, centerY3, radius3, 0, 2*Math.PI, false);
context.fillStyle = 'rgb(250, 250, 250)';
context.fill();
context.strokeStyle = 'rbg(250, 250, 250)';
context.stroke();

 context.beginPath();
  context.moveTo(x7,y7);
  context.lineTo(x8,y8);
  context.lineWidth = 5;
  context.strokeStyle = 'rgb(0, 0, 0)';
  context.lineCap = 'round';
  context.stroke();
 
   context.beginPath();
  context.moveTo(x9,y9);
  context.lineTo(x10,y10);
  context.lineWidth = 5;
  context.strokeStyle = 'rgb(0, 0, 0)';
  context.lineCap = 'round';
  context.stroke();
 
   context.beginPath();
  context.moveTo(x11,y11);
  context.lineTo(x12,y12);
  context.lineWidth = 5;
  context.strokeStyle = 'rgb(0, 0, 0)';
  context.lineCap = 'round';
  context.stroke();
 
    context.beginPath();
  context.moveTo(x13,y13);
  context.lineTo(x14,y14);
  context.lineWidth = 5;
  context.strokeStyle = 'rgb(0, 0, 0)';
  context.lineCap = 'round';
  context.stroke();
 
    context.beginPath();
  context.moveTo(x15,y15);
  context.lineTo(x16,y16);
  context.lineWidth = 5;
  context.strokeStyle = 'rgb(0, 0, 0)';
  context.lineCap = 'round';
  context.stroke();
 
    context.beginPath();
  context.moveTo(x17,y17);
  context.lineTo(x18,y18);
  context.lineWidth = 5;
  context.strokeStyle = 'rgb(0, 0, 0)';
  context.lineCap = 'round';
  context.stroke();
//circle 4^

context.beginPath();
context.arc(centerX4, centerY4, radius4, 0, 2*Math.PI, false);
context.fillStyle = 'rgb(250, 250, 250)';
context.fill();
context.strokeStyle = 'rbg(250, 250, 250)';
context.stroke();

    context.beginPath();
  context.moveTo(x19,y19);
  context.lineTo(x20,y20);
  context.lineWidth = 5;
  context.strokeStyle = 'rgb(0, 0, 0)';
  context.lineCap = 'round';
  context.stroke();
 
      context.beginPath();
  context.moveTo(x21,y21);
  context.lineTo(x22,y22);
  context.lineWidth = 5;
  context.strokeStyle = 'rgb(0, 0, 0)';
  context.lineCap = 'round';
  context.stroke();
 
  context.beginPath();
  context.moveTo(x23,y23);
  context.lineTo(x24,y24);
  context.lineWidth = 5;
  context.strokeStyle = 'rgb(0, 0, 0)';
  context.lineCap = 'round';
  context.stroke();
 
  context.beginPath();
  context.moveTo(x25,y25);
  context.lineTo(x26,y26);
  context.lineWidth = 5;
  context.strokeStyle = 'rgb(0, 0, 0)';
  context.lineCap = 'round';
  context.stroke();
 
  context.beginPath();
  context.moveTo(x27,y27);
  context.lineTo(x28,y28);
  context.lineWidth = 5;
  context.strokeStyle = 'rgb(0, 0, 0)';
  context.lineCap = 'round';
  context.stroke();
 
  context.beginPath();
  context.moveTo(x29,y29);
  context.lineTo(x30,y30);
  context.lineWidth = 5;
  context.strokeStyle = 'rgb(0, 0, 0)';
  context.lineCap = 'round';
  context.stroke();
//cirlce 5^


var x31= -10;
var y31= 100;
var controlX= 25;
var controlY= 60;
var endX= 60;
var endY= 100;

var x32= 140;
var y32= 100;
var controlX1= 175;
var controlY1= 130;
var endX1= 210;
var endY1= 100;

var x33= 290;
var y33= 100;
var controlX2= 325;
var controlY2= 60;
var endX2= 360;
var endY2= 100;

var x34= 440;
var y34= 100;
var controlX3= 475;
var controlY3= 130;
var endX3= 510;
var endY3= 100;

var x35= 590;
var y35= 100;
var controlX4= 625;
var controlY4= 60;
var endX4= 660;
var endY4= 100;

var x36= 740;
var y36= 100;
var controlX5= 775;
var controlY5= 130;
var endX5= 810;
var endY5= 100;


context.beginPath();
context.moveTo(x31,y31);
context.quadraticCurveTo(controlX, controlY, endX, endY);
context.lineWidth = 5;
  context.strokeStyle = 'rgb(250, 250, 250)';
  context.lineCap = 'round';
  context.stroke();
  //^curve1

context.beginPath();
context.moveTo(x32,y32);
context.quadraticCurveTo(controlX1, controlY1, endX1, endY1);
context.lineWidth = 5;
  context.strokeStyle = 'rgb(250, 250, 250)';
  context.lineCap = 'round';
  context.stroke();
  //curve2^
 
  context.beginPath();
context.moveTo(x33,y33);
context.quadraticCurveTo(controlX2, controlY2, endX2, endY2);
context.lineWidth = 5;
  context.strokeStyle = 'rgb(250, 250, 250)';
  context.lineCap = 'round';
  context.stroke();
  //curve3^
 
  context.beginPath();
context.moveTo(x34,y34);
context.quadraticCurveTo(controlX3, controlY3, endX3, endY3);
context.lineWidth = 5;
  context.strokeStyle = 'rgb(250, 250, 250)';
  context.lineCap = 'round';
  context.stroke();
  //curve4^
 
  context.beginPath();
context.moveTo(x35,y35);
context.quadraticCurveTo(controlX4, controlY4, endX4, endY4);
context.lineWidth = 5;
  context.strokeStyle = 'rgb(250, 250, 250)';
  context.lineCap = 'round';
  context.stroke();
  //curve5^
 
  context.beginPath();
context.moveTo(x36,y36);
context.quadraticCurveTo(controlX5, controlY5, endX5, endY5);
context.lineWidth = 5;
  context.strokeStyle = 'rgb(250, 250, 250)';
  context.lineCap = 'round';
  context.stroke();
  //curve6^

////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ

};

</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>

Wednesday, February 6, 2013

Dig Art, Hearts

In class heart and rectangle assignment:

COPY AND PASTE THIS:
file:///Volumes/Student%20Server/Spring%202013/ART/ART%20COM%20210%20A%20-%20Beginning%20Digital%20Arts%20-%20Corrigan/Rikki%20Berk/in%20class%20heart.html




<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ

var rectx5= 300;
var recty5= 100;
var rectwidth5= 400;
var rectheight5= 400;
var startx6= 0;
var starty6= 300;
var endx6= 800;
var endy6= 300;


  context.beginPath();
 context.rect(rectx5, recty5, rectwidth5, rectheight5);
  context.lineWidth = 10;
  context.strokeStyle = 'rgb(250, 100, 100)';
  var grd= context.createLinearGradient(startx6, starty6, endx6, endy6);
  grd.addColorStop(0, 'rgb(225, 225, 225)');
  grd.addColorStop(1, 'rgb(0, 0, 0)');
    context.fillStyle = grd;
  context.fill();
  context.stroke();



var x2 = 500;
var y2 = 600;
var controlX1 = 100;
var controlY1 = 100;
var controlX2 = 500;
var controlY2 = 100;
var endX2 = 500;
var endY2 = 300;

var x3 = 500;
var y3 = 600;
var controlX3 = 700;
var controlY3 = 100;
var controlX4 = 700;
var controlY4 = 200;

context.beginPath();
context.moveTo(x2, y2);
context.bezierCurveTo(controlX1, controlY1, controlX2, controlY2, endX2, endY2);
context.bezierCurveTo(controlX3, controlY3, controlX4, controlY4, x2, y2);
context.fillStyle = 'rgb(255, 0, 0)';
context.fill();
context.stroke();

////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ

};

</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>