<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
//heart
var controlx1 = 100
var controly1 = 20
var controlx2 = 450
var controly2 = 25
var endx2 = 432.5
var endy2 = 170
var x2 = 420
var y2 = 420
var controlx3 = 435
var controly3 = 20
var controlx4 = 800
var controly4 = 25
var endx3 = 420
var endy3 = 420
context.beginPath
context.moveTo(x2,y2);
context.bezierCurveTo(controlx1, controly1, controlx2, controly2, endx2, endy2);
context.bezierCurveTo(controlx3, controly3, controlx4, controly4, endx3, endy3);
context.lineWidth = 12;
context.fillStyle = 'rgb(225, 0, 120)';
context.fill();
context.strokeStyle = 'pink'
context.closePath();
context.stroke();
//triangle
var x = 330;
var y =170;
var x2 = 425;
var y2 = 347;
var x3 = 255;
var y3 = 347;
context.beginPath();
context.moveTo(330,170)
context.lineTo(425,347);
context.lineTo(255,347);
context.lineTo(330,170);
context.lineWidth = 14;
context.closePath();
context.strokeStyle = 'black'
context.fillStyle = 'rgb(255,255,255)';
context.fill();
context.stroke();
//"z"
var x = 475;
var y = 170;
var x2 = 595;
var y2 = 170;
var x3 = 475;
var y3 = 347;
var x4 = 595;
var y4 = 347;
context.beginPath();
context.moveTo(475, 170);
context.lineTo(595, 170);
context.lineWidth = 14;
context.lineCap = 'round';
context.strokeStyle = 'black'
context.stroke();
context.beginPath();
context.moveTo(595,170);
context.lineTo(475,347);
context.lineCap = 'round';
context.strokeStyle = 'black'
context.stroke();
context.beginPath();
context.moveTo(475,347);
context.lineTo(600,347);
context.lineCap = 'round';
context.strokeStyle = 'black'
context.stroke();
//grass
context.beginPath();
context.moveTo(550,420);
context.quadraticCurveTo(650,380,750,420);
context.lineWidth = 10;
context.strokeStyle = 'green'
context.stroke();
//flower stem
context.beginPath();
context.moveTo(650, 400);
context.lineTo(725, 185);
context.strokeStyle = 'green'
context.stroke();
//peddles
var centerx1 = 745;
var centery1 = 165;
var radius1 = 20;
context.beginPath();
context.arc(centerx1, centery1, radius1, 0, 2*Math.PI,false);
context.fillStyle = 'purple'
context.fill();
context.stroke
var centerx2 = 710;
var centery2= 165;
var radius2 = 20;
context.beginPath();
context.arc(centerx2, centery2, radius2, 0, 2*Math.PI,false);
context.fillStyle = 'purple'
context.fill();
context.stroke
var centerx3 = 703;
var centery3= 198;
var radius3 = 20;
context.beginPath();
context.arc(centerx3, centery3, radius3, 0, 2*Math.PI,false);
context.fillStyle = 'purple'
context.fill();
context.stroke
var centerx4 = 739;
var centery4= 200;
var radius4 = 20;
context.beginPath();
context.arc(centerx4, centery4, radius4, 0, 2*Math.PI,false);
context.fillStyle = 'purple'
context.fill();
context.stroke
//center
var centerx = 725;
var centery = 185;
var radius = 25;
context.beginPath();
context.arc(centerx, centery, radius, 0, 2*Math.PI,false);
context.fillStyle = 'yellow'
context.fill();
context.stroke
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
Artist Statement :
I chose this as my composition because my roommate is in Delta Zeta and she gave me her bracelet that says Delta Zeta on it. When I was trying to think of what to make as my project I looked down at my wrist and decided to make something that had the Delta Zeta symbol on it. When making my project I drew a graph on lined paper so that when I had to plug in the points in code i had something to reference. Below is the graph I used as a reference:
No comments:
Post a Comment