heart with gradient background


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

////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
context.beginPath();
context.rect(0, 0, canvas.width, canvas.height);
//Midnight gradient
var grd = context.createLinearGradient(400, 0, 400, 600);
// dark blue
grd.addColorStop(0, "rgb(140, 230, 250)");
// lighter blue
grd.addColorStop(1, "rgb(321, 160, 221)");
context.fillStyle = grd;
context.fill();
context.stroke();



//Heart

//Bezier Curve Variables



var Ax = 360;
var Ay = 200;
var Bx = 360;
var By = 500;
var control1x = 160;
var control1y = -50;
var control2x = 40;
var control2y = 300;
var control3x = 730;
var control3y = 300;
var control4x = 560;
var control4y = -50;

context.beginPath();
context.moveTo(Ax, Ay);
context.bezierCurveTo(control1x, control1y, control2x, control2y, Bx, By);
context.bezierCurveTo(control3x, control3y, control4x, control4y, Ax, Ay);

        // line color

context.lineCap = 'round';
context.stroke();
context.fillStyle   = 'rgb(255, 0, 0)';
context.fill();
grd.addColorStop(0, "rgb(255, 0, 0)");
        // lighter blue






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

};

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

Comments

Post a Comment

Popular posts from this blog

Final Blog

Image
My final project, the portfolio of all the work I did all year was fun to make. I enjoyed looking back on all the projects I created and putting them into a book. It was fairly easy to make and didn't take long. I'm glad I got to see all my work put into a portfolio and enjoyed this as my last project.
Read more

BW to Color

Image
This project took me about 5 hours to complete because I was having difficulty placing the different colors on the image. The image itself at some point changed size and is very detailed with the car so it was impossible to use the same image for different color themes. I also could not take the color away from the image and then add color back so I had to edit the image and put a black and white filter over it and save it that way. I would have enjoyed this project if I did not run into such difficulty with all six images.
Read more

HTML5 Final Project

Image
For my final project I recreated a cubist rendering of the paintings Mona Lisa combined with Starry Night by Vanessa Stark. I used this as my inspiration because the combinations of the different art pieces by different artists along with the added cubism really captured my attention and I enjoy art that is different. It took me about 12 hours to complete this project because of all of the different shapes and details that were in the piece. This class was also the first time I ever used Dreamweaver as well as coding in general. My initial vision of what I had in mind for my project was going to be more fluid and blended on the right side of the face, however since I’m new to Dreamweaver I had a tough time drawing on it. Although it wasn’t fluid, I came to enjoy my geometric version of it better because it was my version of it and I believe that’s what art is all about, putting your own spin on what you create. I enjoyed creating this because it allowed...
Read more