<!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, 799, 599);
var grd = context.createLinearGradient(400, 0, 400, 600);
grd.addColorStop(0, 'yellow');
grd.addColorStop(0.25, 'green');
grd.addColorStop(0.5, 'blue');
grd.addColorStop(0.75, 'purple');
grd.addColorStop(1, 'red');
context.fillStyle = grd;
context.fill();
context.lineWidth = 5;
context.strokeStyle = 'black';
context.stroke();
//Heart
context.beginPath();
context.moveTo(390, 180);
context.bezierCurveTo(280, 20, 120, 170, 290, 330);
context.quadraticCurveTo(345, 410, 385, 465);
context.quadraticCurveTo(425, 410, 465, 345);
context.bezierCurveTo(650, 180, 520, 20, 370, 150);
context.closePath();
context.fillStyle = 'black';
context.fill();
context.lineWidth = 5;
context.strokeStyle = 'limegreen';
context.stroke();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
Artistic Statement:
My progress on this heart was rather great compared to the first one I had made. The first one had lines everywhere and some places would not fill. The progress to this one is a good one. I created this heart using HTML5 code (seen above). In this code, I included two bezier and two quadratic curves. The background is made out of linear gradients in a hippie type of theme. My heart is successful because it is completely filled in and the lines are in the right and proportionate places that they need to be.
No comments:
Post a Comment