Final Canvas Project

February 10, 2020

Final Canvas Project

For my Digital Media class, we had to create an html canvas of whatever we wanted. I decided to create a sunflower for my assignment, because they are my favorite flower and every time I see one it brings a smile to my face. I used a picture of a sunflower standing tall with a clear blue sky behind it as inspiration. I added more elements like a bird and butterfly flying to add more to the picture and make it my own. I also added a shining sun and uniquely shaped clouds to fill up the sky.

Overall, this project was a challenge but was also a fun one. I enjoyed being able to add specific colors to mimic ones of the sky and sunflower. I also enjoyed creating the butterfly as my own and picking the colors for it. I started my canvas with a gradient sky going from light blue to white. I then added the green grass and a tall stem for the sunflower. I then used two circles to create the middle of the flower and tried to incorporate similar colors as to the ones in the picture. After, I added the sun by adding circle in the corner and then inserting triangles to represent sun rays. The triangles were a little difficult only because I had to space them out pretty evenly and create multiple triangles of the same size. The sunflower leaves, bird and butterfly are made up of quadratic curves and filling and was one of the more easier parts of the canvas. The most difficult part though was the clouds and the petals. For these shapes, I used quadratic curves and it became difficult trying to create the shapes of petals and cloud. I had to create each petal and make them somewhat even around the middle of the flower. This was a hard and time consuming task, but I am definitely proud of it. I plan on still using Dreamweaver and experimenting with different shapes, colors and designs!

Hours Worked: 10

My Code:

<!doctype html>

<html>

<head>

<title> FMX 210 DIGITAL MEDIA - CANVAS PROJECT </title>

body,td,th {

font-family: Helvetica, Arial, sans-serif;

font-size: 12px;

color: rgba(255,255,255,1);}

body {

background-color: rgba(0,0,0,1);

}

#myCanvas {background-color: rgba(255,255,255,1); }

</style>

</head>

<body>

var canvas = document.getElementById('myCanvas');

var context = canvas.getContext('2d');

//// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> YOUR CODE STARTS HERE

///SKY BACKGROUND

var grd =

context.createLinearGradient(0, 0, 0, 450);

grd.addColorStop(0, "rgb(51, 214, 255)");

grd.addColorStop(1, "white");

context.fillStyle = grd;

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

/// GRASS

context.beginPath();

context.rect(0,500,800,300); // x,y,w,h

context.closePath();

context.fillStyle = "rgb(112, 219, 112)";

context.fill();

///SUNFLOWER STEM

context.beginPath();

context.rect(360,300,20,200); // x,y,w,h

context.closePath();

context.fillStyle = "rgb(112, 219, 112)";

context.fill();

///SUNFLOWER LEAVES

var x = 360;

var y = 450;

var cpointX = canvas.width / 2 - 100;

var cpointY = canvas.height / 2 +100;

var x1 = 360;

var y1 = 480;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 1;

context.strokeStyle = "rgb(112,219,112)";

context.stroke();

context.fillStyle = "rgb(112, 219, 112)";

context.fill();

var x = 380;

var y = 385;

var cpointX = canvas.width / 2 + 30;

var cpointY = canvas.height / 2 +35;

var x1 = 380;

var y1 = 415;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 1;

context.strokeStyle = "rgb(112,219,112)";

context.stroke();

context.fillStyle = "rgb(112, 219, 112)";

context.fill()

///SUNFLOWER PETALS

///petal 1

var x =347;

var y =242;

var cpointX = canvas.width / 2 -60;

var cpointY = canvas.height / 2 -100;

var x1 =290;

var y1 =210 ;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 5;

context.strokeStyle = "rgb(255,217,25)";

context.stroke();

context.fillStyle = "rgb(255, 255, 102)";

context.fill();

var x =355;

var y =242;

var cpointX = canvas.width / 2 -110;

var cpointY = canvas.height / 2 -20;

var x1 =290;

var y1 =210 ;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 5;

context.strokeStyle = "rgb(255,217,25)";

context.stroke();

context.fillStyle = "rgb(255, 255, 102)";

context.fill();

///petal 2

var x =355;

var y =242;

var cpointX = canvas.width / 2 -65;

var cpointY = canvas.height / 2 -90;

var x1 =360;

var y1 =190 ;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 5;

context.strokeStyle = "rgb(255,217,25)";

context.stroke();

context.fillStyle = "rgb(255, 255, 102)";

context.fill();

var x =355;

var y =242;

var cpointX = canvas.width / 2 +25;

var cpointY = canvas.height / 2 -60;

var x1 =360;

var y1 =190 ;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 5;

context.strokeStyle = "rgb(255,217,25)";

context.stroke();

context.fillStyle = "rgb(255, 255, 102)";

context.fill();

//petal 3

var x =390;

var y =242;

var cpointX = canvas.width / 2 -10;

var cpointY = canvas.height / 2 -100;

var x1 =430;

var y1 =200 ;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 5;

context.strokeStyle = "rgb(255,217,25)";

context.stroke();

context.fillStyle = "rgb(255, 255, 102)";

context.fill();

var x =390;

var y =242;

var cpointX = canvas.width / 2 +50;

var cpointY = canvas.height / 2 -30;

var x1 =430;

var y1 =200 ;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 5;

context.strokeStyle = "rgb(255,217,25)";

context.stroke();

context.fillStyle = "rgb(255, 255, 102)";

context.fill();

///petal 4

var x =410;

var y =260;

var cpointX = canvas.width / 2 -30;

var cpointY = canvas.height / 2 -50;

var x1 =460;

var y1 =240;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 5;

context.strokeStyle = "rgb(255,217,25)";

context.stroke();

context.fillStyle = "rgb(255, 255, 102)";

context.fill();

/// petal 5

var x =410;

var y =280;

var cpointX = canvas.width / 2 +40;

var cpointY = canvas.height / 2 -10;

var x1 =460;

var y1 =240;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 5;

context.strokeStyle = "rgb(255,217,25)";

context.stroke();

context.fillStyle = "rgb(255, 255, 102)";

context.fill();

context.beginPath();

context.moveTo(400,267);

context.lineTo(456,240);

context.lineTo(400,290);

context.closePath();

context.lineWidth = 5;

context.lineJoin = "round";

context.strokeStyle = "rgb(255,255,102)";

context.stroke();

context.fillStyle = "rgb(255,255,102)";

context.fill();

///petal 6

var x =400;

var y =290;

var cpointX = canvas.width / 2 +40;

var cpointY = canvas.height / 2 -40;

var x1 =470;

var y1 =300;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 5;

context.strokeStyle = "rgb(255,217,25)";

context.stroke();

context.fillStyle = "rgb(255,255,102)";

context.fill();

var x =400;

var y =290;

var cpointX = canvas.width / 2 +30;

var cpointY = canvas.height / 2 +20;

var x1 =470;

var y1 =299;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 5;

context.strokeStyle = "rgb(255,217,25)";

context.stroke();

context.fillStyle = "rgb(255,255,102)";

context.fill();

var x =390;

var y =305;

var cpointX = canvas.width / 2 +40;

var cpointY = canvas.height / 2 -10;

var x1 =455;

var y1 =330;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 5;

context.strokeStyle = "rgb(255,217,25)";

context.stroke();

context.fillStyle = "rgb(255,255,102)";

context.fill();

var x =390;

var y =305;

var cpointX = canvas.width / 2 -20;

var cpointY = canvas.height / 2 +30;

var x1 =455;

var y1 =330;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 5;

context.strokeStyle = "rgb(255,217,25)";

context.stroke();

context.fillStyle = "rgb(255,255,102)";

context.fill();

///petal 7

var x =370;

var y =305;

var cpointX = canvas.width / 2 +20;

var cpointY = canvas.height / 2 +30;

var x1 =395;

var y1 =360;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 5;

context.strokeStyle = "rgb(255,217,25)";

context.stroke();

context.fillStyle = "rgb(255,255,102)";

context.fill();

var x =370;

var y =305;

var cpointX = canvas.width / 2 -60;

var cpointY = canvas.height / 2 +50;

var x1 =395;

var y1 =360;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 5;

context.strokeStyle = "rgb(255,217,25)";

context.stroke();

context.fillStyle = "rgb(255,255,102)";

context.fill();

///petal 8

var x =355;

var y =305;

var cpointX = canvas.width / 2 -30;

var cpointY = canvas.height / 2 +50;

var x1 =340;

var y1 =360;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 5;

context.strokeStyle = "rgb(255,217,25)";

context.stroke();

context.fillStyle = "rgb(255,255,102)";

context.fill();

var x =355;

var y =305;

var cpointX = canvas.width / 2 -100;

var cpointY = canvas.height / 2 +10;

var x1 =340;

var y1 =360;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 5;

context.strokeStyle = "rgb(255,217,25)";

context.stroke();

context.fillStyle = "rgb(255,255,102)";

context.fill();

///petal 9

var x =340;

var y =300;

var cpointX = canvas.width / 2 -80;

var cpointY = canvas.height / 2 +50;

var x1 =270;

var y1 =310;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 5;

context.strokeStyle = "rgb(255,217,25)";

context.stroke();

context.fillStyle = "rgb(255,255,102)";

context.fill();

var x =340;

var y =300;

var cpointX = canvas.width / 2 -80;

var cpointY = canvas.height / 2 -30;

var x1 =270;

var y1 =310;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 5;

context.strokeStyle = "rgb(255,217,25)";

context.stroke();

context.fillStyle = "rgb(255,255,102)";

context.fill();

///petal 10

var x =340;

var y =275;

var cpointX = canvas.width / 2 -100;

var cpointY = canvas.height / 2 +10;

var x1 =260;

var y1 =260;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 5;

context.strokeStyle = "rgb(255,217,25)";

context.stroke();

context.fillStyle = "rgb(255,255,102)";

context.fill();

var x =340;

var y =275;

var cpointX = canvas.width / 2 -90;

var cpointY = canvas.height / 2 -75;

var x1 =260;

var y1 =260;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 5;

context.strokeStyle = "rgb(255,217,25)";

context.stroke();

context.fillStyle = "rgb(255,255,102)";

context.fill();

///SUNFLOWER MIDDLE

var centerX = 370;

var centerY = 275;

var radius = 40;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2*Math.PI, false);

context.lineWidth = 5;

context.strokeStyle = 'rgb(153, 77, 0)';

context.fillStyle ="rgb(102, 51, 0)"

context.fill();

context.stroke();

var centerX = 370;

var centerY = 275;

var radius = 25;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2*Math.PI, false);

context.lineWidth = 2;

context.strokeStyle = 'rgb(128, 128, 0)';

context.fillStyle ="rgb(51, 51, 0)"

context.fill();

context.stroke();

///MIDDLE OF SUN

var centerX = 750;

var centerY = 50;

var radius = 75;

context.beginPath();

context.arc(centerX, centerY, radius, 0, 2*Math.PI, false);

context.lineWidth = 5;

context.strokeStyle = 'rgb(255,230,102)';

context.fillStyle ="rgb(255,255,128)"

context.fill();

context.stroke();

///SUN RAYS

///triangle 1

context.beginPath();

context.moveTo(670,15);

context.lineTo(665,45);

context.lineTo(645,25);

context.closePath();

context.lineWidth = 5;

context.lineJoin = "point";

context.strokeStyle = "rgb(255,230,102)"; context.stroke();

context.fillStyle = "rgb(255,255,128)";

context.fill();

///triangle 2

context.beginPath();

context.moveTo(665,70);

context.lineTo(670,95);

context.lineTo(645,90);

context.closePath();

context.lineWidth = 5;

context.lineJoin = "point";

context.strokeStyle = "rgb(255,230,102)"; context.stroke();

context.fillStyle = "rgb(255,255,128)";

context.fill();

///triangle 3

context.beginPath();

context.moveTo(680,110);

context.lineTo(695,130);

context.lineTo(665,135);

context.closePath();

context.lineWidth = 5;

context.lineJoin = "point";

context.strokeStyle = "rgb(255,230,102)"; context.stroke();

context.fillStyle = "rgb(255,255,128)";

context.fill();

///triangle 4

context.beginPath();

context.moveTo(715,135);

context.lineTo(740,140);

context.lineTo(720,160);

context.closePath();

context.lineWidth = 5;

context.lineJoin = "point";

context.strokeStyle = "rgb(255,230,102)"; context.stroke();

context.fillStyle = "rgb(255,255,128)";

context.fill();

///triangle 5

context.beginPath();

context.moveTo(760,140);

context.lineTo(780,135);

context.lineTo(775,160);

context.closePath();

context.lineWidth = 5;

context.lineJoin = "point";

context.strokeStyle = "rgb(255,230,102)"; context.stroke();

context.fillStyle = "rgb(255,255,128)";

context.fill();

///CLOUDS

///cloud 1

var x = 50;

var y = 50;

var cpointX = canvas.width / 2 - 400;

var cpointY = canvas.height / 2 - 225;

var x1 = 70;

var y1 = 100;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 5;

context.strokeStyle = "rgb(230,255,255)";

context.stroke();

context.fillStyle = "rgb(255,255,255)";

context.fill();

var x = 65;

var y = 100;

var cpointX = canvas.width / 2 -300;

var cpointY = canvas.height / 2 - 135;

var x1 = 175;

var y1 = 100;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 5;

context.strokeStyle = "rgb(230,255,255)";

context.stroke();

context.fillStyle = "rgb(255,255,255)";

context.fill();

var x = 170;

var y = 100;

var cpointX = canvas.width / 2 -120;

var cpointY = canvas.height / 2 - 205;

var x1 = 160;

var y1 = 50;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 5;

context.strokeStyle = "rgb(230,255,255)";

context.stroke();

context.fillStyle = "rgb(255,255,255)";

context.fill();

var x = 165;

var y = 50;

var cpointX = canvas.width / 2 -300;

var cpointY = canvas.height / 2 - 300;

var x1 = 46;

var y1 = 50;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 5;

context.strokeStyle = "rgb(230,255,255)";

context.stroke();

context.fillStyle = "rgb(255,255,255)";

context.fill();

context.beginPath();

context.rect(65,50,100, 50); // x,y,w,h

context.closePath();

context.fillStyle = "rgb(255,255,255)";

context.fill();

context.beginPath();

context.rect(50,45,70, 50); // x,y,w,h

context.closePath();

context.fillStyle = "rgb(255,255,255)";

context.fill();

context.beginPath();

context.rect(150,75,60, 25); // x,y,w,h

context.closePath();

context.fillStyle = "rgb(255,255,255)";

context.fill();

///cloud 2

var x = 410;

var y = 100;

var cpointX = canvas.width / 2 - 50;

var cpointY = canvas.height / 2 - 250;

var x1 = 475;

var y1 = 75;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 5;

context.strokeStyle = "rgb(230,255,255)";

context.stroke();

context.fillStyle = "rgb(255,255,255)";

context.fill();

var x = 475;

var y = 75;

var cpointX = canvas.width / 2 + 60;

var cpointY = canvas.height / 2 - 275;

var x1 = 600;

var y1 = 80;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 5;

context.strokeStyle = "rgb(230,255,255)";

context.stroke();

context.fillStyle = "rgb(255,255,255)";

context.fill();

var x = 600;

var y = 80;

var cpointX = canvas.width / 2 +250;

var cpointY = canvas.height / 2 - 205;

var x1 = 540;

var y1 = 100;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 5;

context.strokeStyle = "rgb(230,255,255)";

context.stroke();

context.fillStyle = "rgb(255,255,255)";

context.fill();

var x = 540;

var y = 100;

var cpointX = canvas.width / 2 + 250;

var cpointY = canvas.height / 2 - 55;

var x1 = 410;

var y1 = 100;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 5;

context.strokeStyle = "rgb(230,255,255)";

context.stroke();

context.fillStyle = "rgb(255,255,255)";

context.fill();

context.beginPath();

context.moveTo(475,73);

context.lineTo(540,100);

context.lineTo(417,100);

context.closePath();

context.lineWidth = 5;

context.lineJoin = "point";

context.strokeStyle = "rgb(255,255,255)"; context.stroke();

context.fillStyle = "rgb(255,255,255)";

context.fill();

context.beginPath();

context.moveTo(475,75);

context.lineTo(595,80);

context.lineTo(550,100);

context.closePath();

context.lineWidth = 5;

context.lineJoin = "point";

context.strokeStyle = "rgb(255,255,255)"; context.stroke();

context.fillStyle = "rgb(255,255,255)";

context.fill();

///BUTTERFLY WINGS

var x =80;

var y =235;

var cpointX = canvas.width / 2 -440;

var cpointY = canvas.height / 2 -100;

var x1 =80;

var y1 =285 ;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 10;

context.strokeStyle = "rgb(255,128,102)";

context.stroke();

context.fillStyle = "rgb(255,179,217)";

context.fill();

var x =80;

var y =265;

var cpointX = canvas.width / 2 -440;

var cpointY = canvas.height / 2 +20;

var x1 =80;

var y1 =296 ;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 10;

context.strokeStyle = "rgb(255,128,102)";

context.stroke();

context.fillStyle = "rgb(255,179,217)";

context.fill();

var x =80;

var y =235;

var cpointX = canvas.width / 2 -210;

var cpointY = canvas.height / 2 -110;

var x1 =80;

var y1 =285 ;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 10;

context.strokeStyle = "rgb(255,128,102)";

context.stroke();

context.fillStyle = "rgb(255,179,217)";

context.fill();

var x =80;

var y =265;

var cpointX = canvas.width / 2 -210;

var cpointY = canvas.height / 2 +20;

var x1 =80;

var y1 =296 ;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 10;

context.strokeStyle = "rgb(255,128,102)";

context.stroke();

context.fillStyle = "rgb(255,179,217)";

context.fill();

///BUTTERFLY BODY

var x =80;

var y =225;

var cpointX = canvas.width / 2 -360;

var cpointY = canvas.height / 2 -30;

var x1 =80;

var y1 =300 ;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 5;

context.strokeStyle = "rgb(255,128,102)";

context.stroke();

context.fillStyle = "rgb(255,191,179)";

context.fill();

var x =80;

var y =225;

var cpointX = canvas.width / 2 -280;

var cpointY = canvas.height / 2 -35;

var x1 =80;

var y1 =300 ;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 5;

context.strokeStyle = "rgb(255,128,102)";

context.stroke();

context.fillStyle = "rgb(255,191,179)";

context.fill();

///BUTTERFLY ANNTENEA

var x = 60;

var y = 210;

var cpointX = canvas.width / 2 - 320;

var cpointY = canvas.height / 2 - 90;

var x1 = 78;

var y1 = 225;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 5;

context.strokeStyle = "rgb(2255,128,102)";

context.stroke();

var x = 100;

var y = 210;

var cpointX = canvas.width / 2 - 320;

var cpointY = canvas.height / 2 - 90;

var x1 = 80;

var y1 = 225;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 5;

context.strokeStyle = "rgb(2255,128,102)";

context.stroke();

///BIRD

var x =550 ;

var y =250;

var cpointX = canvas.width / 2 + 150;

var cpointY = canvas.height / 2 - 100;

var x1 =610 ;

var y1 =250 ;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 10;

context.strokeStyle = "rgb(51,0,9)";

context.stroke();

var x =605 ;

var y =250;

var cpointX = canvas.width / 2 + 215;

var cpointY = canvas.height / 2 - 100;

var x1 =680;

var y1 =250 ;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 10;

context.strokeStyle = "rgb(51,0,9)";

context.stroke();

//// <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< YOUR CODE ENDS HERE

</script>

</body>

</html>

Search This Blog

Darienne's Digital Media Blog

Final Canvas Project

Comments

Post a Comment

Popular Posts

Somewhere

Self Portrait