Home

Home
"There are places I remember all my life." The Beatles

Wednesday, February 13, 2013


This was my original drawing, so my real graphic turned out very similar which i was really happy about!


I am somewhat known among my friends for my love of mustaches, and also my love of DZ..i recently joined DZ, and in being so far away from home it has done a lot to make me feel at home here. They are looking for any new images, so I decided to try to combine these two things in a somewhat humorous way, because I'm also known to not take everything too seriously! Pink and green are the colors of Delta Zeta, and I chose my favourite tones of these colors for my image. The turtle is also the national symbol, and as a bonus its one of my favourite animals too. I think this turned out well, and better than i was expecting. I struggled with the small mustache on the turtle, and also with his green body shape. From this project however i realised that i really like programming, and i found this a lot of fun!

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

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

var rectx1 = 0;
var recty1 = 0;
var rectwidth1 = 800;
var rectheight1 = 600;
var startx = 0
var starty = 0
var endx = 600
var endy = 800

//rectangle
context.beginPath();
context.rect(rectx1, recty1, rectwidth1, rectheight1);
context.strokeStyle = 'rgb(153, 102, 255)';
//context.fillStyle = 'rgb(255, 204, 204)';
var grd = context.createLinearGradient (startx, starty, endx, endy);
grd.addColorStop (0, 'rgb(204, 255, 204)');
grd.addColorStop (1, 'rgb(255, 170, 220)');
context.fillStyle = grd;
context.fill();
context.stroke();

//triangle
context.beginPath();
context.moveTo(150, 50);
context.lineTo(250, 250);
context.lineTo(50, 250);
context.lineTo(150, 50);
context.lineWidth = 10;
context.strokeStyle = 'rgb(255, 102, 170)';
context.lineCap = 'round'
context.fillStyle = 'rgba(255, 102, 153, 0.4)';
context.fill();
context.stroke();

//Z
context.beginPath();
context.moveTo (275, 50);
context.lineTo(450, 50);
context.lineTo(275, 250);
context.lineTo(455, 250);
context.lineWidth = 10
context.strokeStyle = 'rgb(255, 102, 170)';
context.lineCap = 'round'
context.stroke();

//top mustache
context.beginPath();
context.moveTo(150,175);
context.bezierCurveTo(115, 115, 100, 215, 50,160);
context.quadraticCurveTo(100, 225, 150, 185);
context.quadraticCurveTo(200, 225, 250, 160);
context.bezierCurveTo(200, 215, 185, 115, 150, 175);
context.closePath();
context.fillStyle = 'black'
context.fill();
context.strokeStyle = 'black'
context.lineWidth = 5
context.stroke();


//turtleshell
context.beginPath();
context.moveTo(450, 500);
context.quadraticCurveTo(600,250, 750, 500);
context.closePath();
context.strokeStyle = 'rgb(219, 49 , 140)';
context.fillStyle = 'rgba(255, 102, 170, .7)';
var grd = context.createRadialGradient(550, 400, 140, 650, 500, 100);
grd.addColorStop(.3, 'rgb(255, 225, 255)');
grd.addColorStop(1, 'rgb(255, 110, 199)');
context.fillStyle = grd
context.fill();
context.stroke();

//turtle
context.beginPath();
context.moveTo(450, 500);
context.bezierCurveTo(380, 435, 455, 390, 440,350);
context.bezierCurveTo(420, 305, 370, 305, 355, 350);
context.bezierCurveTo(340, 390, 415, 435, 390, 490);
context.bezierCurveTo(380, 510, 380, 535, 430, 540);
context.quadraticCurveTo(585, 550, 740, 540);
context.quadraticCurveTo(785, 537, 795, 460);
context.quadraticCurveTo(765, 505, 750,500);
context.closePath();
context.strokeStyle= 'rgb(0, 102, 0)';
context.fillStyle = 'rgb(51, 170, 0)';
context.fill();
context.stroke();


//foot left
context.beginPath();
context.moveTo(500, 545);
context.bezierCurveTo(510, 570, 558, 570, 563, 545);
context.closePath();
context.fillStyle = 'rgb(51, 170, 0)';
context.fill();
context.stroke();
//right foot
context.beginPath();
context.moveTo(627, 545);
context.bezierCurveTo(637, 570, 685, 570, 690, 545);
context.closePath();
context.fillStyle = 'rgb(51, 170, 0)';
context.fill();
context.stroke();

//left eye
context.beginPath();
context.arc(382, 350, 5, 0, 2 * Math.PI, false);
context.lineWidth = 1
context.strokeStyle = 'black';
context.fillStyle = 'black';
context.fill();
context.stroke();
//right eye
context.beginPath();
context.arc(412, 350, 5, 0, 2 * Math.PI, false);
context.lineWidth = 1
context.strokeStyle = 'black';
context.fillStyle = 'black';
context.fill();
context.stroke();

//turtle mustache
context.beginPath();
context.moveTo(397, 380);
context.bezierCurveTo(383, 362, 378, 390, 367, 375);
context.quadraticCurveTo(380, 392, 397, 383);
context.quadraticCurveTo(414, 392, 427, 375);
context.bezierCurveTo(416, 390, 411, 362, 397,380);
context.closePath();
context.fillStyle = 'black';
context.fill();
context.stroke();

//turtle shell
context.beginPath();
context.moveTo(550, 425);
context.bezierCurveTo(540, 440, 528, 430, 525, 460);
context.bezierCurveTo(534, 480, 555, 450, 568, 445);
context.bezierCurveTo(570, 438, 560, 420, 550, 425);
context.closePath();
context.strokeStyle = 'rgb(219, 49 , 140)';
context.fillStyle = 'rgba(219, 49, 140, 0.7)';
context.fill();
context.stroke();

context.beginPath();
context.moveTo(620, 450);
context.bezierCurveTo(650, 458, 665, 475, 650, 498);
context.lineTo(625,498);
context.bezierCurveTo(600, 475, 625, 460, 620, 450);
context.strokeStyle = 'rgb(219, 49 , 140)';
context.fillStyle = 'rgba(219, 49, 140, 0.7)';
context.fill();
context.stroke();










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

};

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

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)