Heart in HTML Coding - 9/12 Homework

Heart Image Attempt 2

Heart Image Attempt 1

Graph of Points and Curves to make the Heart

HTML Code for Attempt 1:

//rectangle

context.beginPath();

context.rect(0, 0, 800, 600);

context.lineWidth = 50;

context.strokeStyle = 'rgb(210, 210, 255)';

//context.fillStyle = 'rgb(205, 225, 255)';

 // add linear gradient

        var grd = context.createLinearGradient(0, 0, 800, 600);

        grd.addColorStop(0, 'rgb(255, 255, 255)');

        grd.addColorStop(0.5, 'rgb(205, 150, 150)');

        grd.addColorStop(1, 'rgb(255, 210, 210)');

        context.fillStyle = grd;

context.fill();

context.stroke();

//curves

context.beginPath();

context.moveTo(300,325);

context.bezierCurveTo(450, 200, 550, 250, 300, 500);

context.lineWidth = 20;

context.strokeStyle = 'rgb(200, 245, 245)';

context.lineCap = 'round';

context.stroke();

context.beginPath();

context.moveTo(300,325);

context.bezierCurveTo(150, 200, 50, 250, 300, 500);

context.stroke();

HTML Code for Attempt 2:

//rectangle
context.beginPath();
context.rect(0, 0, 800, 600);
context.lineWidth = 50;
context.strokeStyle = 'rgba(255, 204, 102, 0.5)';
//context.fillStyle = 'rgb(205, 225, 255)';
 // add linear gradient
        var grd = context.createLinearGradient(0, 0, 800, 600);
        grd.addColorStop(0, 'rgb(255, 255, 255)');
        grd.addColorStop(0.5, 'rgb(205, 150, 150)');
        grd.addColorStop(1, 'rgb(255, 210, 210)');
        context.fillStyle = grd;
context.fill();
context.stroke();

//curves
context.beginPath();
context.moveTo(400,200);
context.bezierCurveTo(300, 0, 100, 200, 250, 325);
context.quadraticCurveTo(360,400, 400, 500)
context.quadraticCurveTo(460,400, 550, 325)
context.bezierCurveTo(700, 200, 500, 0, 400, 200);
context.lineWidth = 20;
context.strokeStyle = 'rgb(200, 245, 245)';
context.lineCap = 'round';
context.fillStyle = 'rgba(210, 210, 255, 0.5)';
context.fill();
context.stroke();