I first wanted to design a cupcake because I am obsessed with baking and thought it would be cool to use if I ever decided to create my own logo for my baking business. It took me awhile to figure out what else to put, so then I included the music staff with the notes and the microphone to signify what is most important in my life: singing and baking. So this graphic design is a simple picture that describes me. What I learned from using HTML 5 was that it takes a lot of patience and a lot of time. But in the end, it's worth it, because I was really happy with what I created, even though it was sad how long it took me! Below I have pasted the entire code for the image. For the cupcake base and wrapper, I just simply connected lines and created stripes to make the wrapper look more realistic. For the frosting, I used bezier curves to create the cloud-like white frosting on top of the cupcake. For the sprinkles, I just used colored lines and thickened them to make them look like rainbow sprinkles. Then the music staff: This part took me the longest because I had to use bezier curves to create the 5 lines on the staff. Then for each music note, I created a filled in circle and attached lines to them producing quarter notes and eight notes. I the canvas graph to try and pinpoint where the notes should go on the staff so they would appear in the exact points. After that, I used a bezier curve to form the microphone wire and used lines to create the microphone base, a circle for the actual head of the mike, and a line in the center to give it more detail. On top of the cupcake, I used a circle and a bezier curve to create the cherry on top! And for the background, I used a liner gradient from light pink fading into a darker pink. I played around with a lot of colors for this part, and decided on this one because one of my favorite colors is pink and I thought it made the cupcake and the black music notes stand out the best.
I used this picture of music notes as a guide to help me create my own.
I used this picture of music notes as a guide to help me create my own.
CODE:
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
///Background///
context.beginPath();
context.rect(0, 0, 800, 600);
var grd = context.createLinearGradient(0, 0, 800, 600);
grd.addColorStop(0, 'pink');
grd.addColorStop(1, '#F52887');
context.fillStyle= grd;
context.fill();
context.stroke();
///Cupcake Base///
context.beginPath();
context.moveTo(300, 240);
context.lineTo(325, 375);
context.lineTo(475, 375);
context.lineTo(500, 240);
context.lineTo(300, 240);
context.closePath();
context.lineWidth=3;
context.lineCap = 'round';
context.fillStyle= '#5CB3FF';
context.fill();
context.stroke();
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
///Background///
context.beginPath();
context.rect(0, 0, 800, 600);
var grd = context.createLinearGradient(0, 0, 800, 600);
grd.addColorStop(0, 'pink');
grd.addColorStop(1, '#F52887');
context.fillStyle= grd;
context.fill();
context.stroke();
///Cupcake Base///
context.beginPath();
context.moveTo(300, 240);
context.lineTo(325, 375);
context.lineTo(475, 375);
context.lineTo(500, 240);
context.lineTo(300, 240);
context.closePath();
context.lineWidth=3;
context.lineCap = 'round';
context.fillStyle= '#5CB3FF';
context.fill();
context.stroke();
///Cupcake Wrapper///
context.beginPath();
context.moveTo(320, 240);
context.lineTo(340, 375);
context.stroke();
context.beginPath();
context.moveTo(340, 240);
context.lineTo(360, 375);
context.stroke();
context.beginPath();
context.moveTo(365, 240);
context.lineTo(380, 375);
context.stroke();
context.beginPath();
context.moveTo(390, 240);
context.lineTo(400, 375);
context.stroke();
context.beginPath();
context.moveTo(415, 240);
context.lineTo(420, 375);
context.stroke();
context.beginPath();
context.moveTo(440, 240);
context.lineTo(440, 375);
context.stroke();
context.beginPath();
context.moveTo(470, 240);
context.lineTo(460, 375);
context.stroke();
///Cupcake Frosting///
context.beginPath();
context.moveTo(305, 190);
context.bezierCurveTo(275, 200, 275, 230, 300, 250);
context.bezierCurveTo(325, 258, 345, 250, 350, 235);
context.bezierCurveTo(350, 275, 375, 280, 400, 275);
context.bezierCurveTo(425, 270, 430, 255, 430, 242);
context.bezierCurveTo(448, 253, 460, 260, 475, 260);
context.bezierCurveTo(500, 260, 535, 235, 495, 190);
context.bezierCurveTo(500, 125, 450, 105, 430, 105);
context.bezierCurveTo(315, 95, 300, 150, 305, 190);
context.closePath();
context.lineWidth=5;
context.fillStyle= 'white';
context.fill();
context.stroke();
///Sprinkles on Cupcake///
context.beginPath();
context.moveTo(380, 190);
context.lineTo(400, 180);
context.lineWidth=5;
context.strokeStyle= '#FEFE03';
context.stroke();
context.beginPath();
context.moveTo(348, 150);
context.lineTo(366, 140);
context.strokeStyle= '#FE0307';
context.stroke();
context.beginPath();
context.moveTo(458, 130);
context.lineTo(475, 153);
context.strokeStyle= '#3503FE';
context.stroke();
context.beginPath();
context.moveTo(415, 160);
context.lineTo(430, 175);
context.strokeStyle= '#C80FE9';
context.stroke();
context.beginPath();
context.moveTo(325, 205);
context.lineTo(340, 224);
context.strokeStyle= '#05B726';
context.stroke();
context.beginPath();
context.moveTo(435, 210);
context.lineTo(418, 230);
context.strokeStyle= '#FF921C';
context.stroke();
context.beginPath();
context.moveTo(375, 240);
context.lineTo(390, 250);
context.strokeStyle= '#1CFFF0';
context.stroke();
context.beginPath();
context.moveTo(480, 210);
context.lineTo(500, 230);
context.strokeStyle= '#F00068';
context.stroke();
///Cherry///
context.beginPath();
context.arc(400, 90, 30, 0 , 2 * Math.PI, false);
context.fillStyle= 'rgb(255, 0, 0)';
context.fill();
context.strokeStyle= 'black';
context.stroke();
///Cherry Stem///
context.beginPath();
context.moveTo(400, 60);
context.bezierCurveTo(405, 50, 375, 15, 350, 23);
context.stroke();
///Music Staff///
context.beginPath();
context.moveTo(0, 350);
context.bezierCurveTo(50, 340, 110, 340, 145, 370);
context.bezierCurveTo(200, 425, 400, 440, 530, 400);
context.bezierCurveTo(600, 375, 675, 360, 800, 360);
context.lineWidth=2;
context.stroke();
context.beginPath();
context.moveTo(0, 375);
context.bezierCurveTo(50, 365, 110, 365, 145, 395);
context.bezierCurveTo(200, 450, 400, 465, 530, 425);
context.bezierCurveTo(600, 400, 675, 385, 800, 385);
context.stroke();
context.beginPath();
context.moveTo(0, 400);
context.bezierCurveTo(50, 390, 110, 390, 145, 420);
context.bezierCurveTo(200, 475, 400, 490, 530, 450);
context.bezierCurveTo(600, 425, 675, 410, 800, 410);
context.stroke();
context.beginPath();
context.moveTo(0, 425);
context.bezierCurveTo(50, 415, 110, 415, 145, 445);
context.bezierCurveTo(200, 500, 400, 515, 530, 475);
context.bezierCurveTo(600, 450, 675, 435, 800, 435);
context.stroke();
context.beginPath();
context.moveTo(0, 450);
context.bezierCurveTo(50, 440, 110, 440, 145, 470);
context.bezierCurveTo(200, 525, 400, 540, 530, 500);
context.bezierCurveTo(600, 475, 675, 460, 800, 460);
context.stroke();
context.beginPath();
context.moveTo(5, 350);
context.lineTo(5, 450);
context.lineWidth=8;
context.lineCap= 'butt';
context.stroke();
context.beginPath();
context.moveTo(15, 348);
context.lineTo(15, 448);
context.lineWidth=2;
context.stroke();
///Microphone///
context.beginPath();
context.moveTo(600, 600);
context.bezierCurveTo(540, 540, 620, 490, 720, 300);
context.bezierCurveTo(750, 250, 750, 200, 725, 190);
context.lineWidth=10;
context.stroke();
context.beginPath();
context.moveTo(720, 200);
context.lineTo(728, 180);
context.lineTo(640, 130);
context.lineTo(630, 160);
context.lineTo(720, 200);
context.lineWidth=3;
context.fillStyle= 'black';
context.fill();
context.stroke();
context.beginPath();
context.arc(610, 133, 30, 0, 2*Math.PI, false);
context.lineWidth=5;
context.fillStyle= 'rgb(100, 100, 100)';
context.fill();
context.stroke();
context.beginPath();
context.moveTo(598, 163);
context.lineTo(623, 103);
context.lineWidth=8;
context.lineCap= 'round';
context.stroke();
///Music Notes///
context.beginPath();
context.arc(50, 420, 10, 0, 2 * Math.PI, false);
context.fillStyle= 'black';
context.fill();
context.lineWidth=2;
context.stroke();
context.beginPath();
context.moveTo(60, 420);
context.lineTo(60, 335);
context.lineCap= 'butt';
context.stroke();
context.beginPath();
context.arc(110, 400, 10, 0, 2*Math.PI, false);
context.fillStyle= 'black';
context.fill();
context.stroke();
context.beginPath();
context.arc(140, 430, 10, 0, 2*Math.PI, false);
context.fillStyle= 'black';
context.fill();
context.stroke();
context.beginPath();
context.moveTo(120, 400);
context.lineTo(120, 330);
context.stroke();
context.beginPath();
context.moveTo(120, 330);
context.lineTo(150, 340);
context.lineWidth=8;
context.stroke();
context.beginPath();
context.moveTo(150, 340);
context.lineTo(150, 430);
context.lineWidth=2;
context.stroke();
context.beginPath();
context.arc(200, 413, 10, 0, 2*Math.PI, false);
context.fillStyle= 'black';
context.fill();
context.stroke();
context.beginPath();
context.moveTo(190, 413);
context.lineTo(190, 503);
context.stroke();
context.beginPath();
context.arc(260, 453, 10, 0, 2*Math.PI, false);
context.fillStyle= 'black';
context.fill();
context.stroke();
context.beginPath();
context.moveTo(250, 453);
context.lineTo(250, 543);
context.stroke();
context.beginPath();
context.arc(330, 485, 10, 0, 2*Math.PI, false);
context.fillStyle= 'black';
context.fill();
context.stroke();
context.beginPath();
context.moveTo(340, 485);
context.lineTo(340, 410);
context.stroke();
context.beginPath();
context.moveTo(340, 410);
context.lineTo(380, 405);
context.lineWidth=8;
context.stroke();
context.beginPath();
context.moveTo(380, 405);
context.lineTo(380, 460);
context.lineWidth=2;
context.stroke();
context.beginPath();
context.arc(370, 460, 10, 0, 2*Math.PI, false);
context.fillStyle= 'black';
context.fill();
context.stroke();
context.beginPath();
context.arc(415, 470, 10, 0, 2*Math.PI, false);
context.fillStyle= 'black';
context.fill();
context.stroke();
context.beginPath();
context.moveTo(425, 470);
context.lineTo(425, 410);
context.stroke();
context.beginPath();
context.moveTo(425, 410);
context.lineTo(460, 415);
context.lineWidth=8;
context.stroke();
context.beginPath();
context.moveTo(460, 415);
context.lineTo(460, 480);
context.lineWidth=2;
context.stroke();
context.beginPath();
context.arc(450, 480, 10, 0, 2*Math.PI, false);
context.fillStyle= 'black';
context.fill();
context.stroke();
context.beginPath();
context.arc(490, 500, 10, 0, 2*Math.PI, false);
context.fillStyle= 'black';
context.fill();
context.stroke();
context.beginPath();
context.moveTo(500, 500);
context.lineTo(500, 420);
context.stroke();
context.beginPath();
context.arc(550, 458, 10, 0, 2*Math.PI, false);
context.fillStyle= 'black';
context.fill();
context.stroke();
context.beginPath();
context.moveTo(560, 458);
context.lineTo(560, 375);
context.stroke();
context.beginPath();
context.arc(600, 478, 10, 0, 2*Math.PI, false);
context.fillStyle= 'black';
context.fill();
context.stroke();
context.beginPath();
context.moveTo(610, 480);
context.lineTo(610, 400);
context.stroke();
context.beginPath();
context.arc(680, 415, 10, 0, 2*Math.PI, false);
context.fillStyle= 'black';
context.fill();
context.stroke();
context.beginPath();
context.moveTo(670, 415);
context.lineTo(670, 470);
context.stroke();
context.beginPath();
context.moveTo(670, 470);
context.lineTo(705, 460);
context.lineWidth=8;
context.stroke();
context.beginPath();
context.moveTo(705, 460);
context.lineTo(705, 400);
context.lineWidth=2;
context.stroke();
context.beginPath();
context.arc(715, 400, 10, 0, 2*Math.PI, false);
context.fillStyle= 'black';
context.fill();
context.stroke();
context.beginPath();
context.arc(760, 435, 10, 0, 2*Math.PI, false);
context.fillStyle= 'black';
context.fill();
context.stroke();
context.beginPath();
context.moveTo(770, 435);
context.lineTo(770, 360);
context.stroke();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
context.beginPath();
context.moveTo(320, 240);
context.lineTo(340, 375);
context.stroke();
context.beginPath();
context.moveTo(340, 240);
context.lineTo(360, 375);
context.stroke();
context.beginPath();
context.moveTo(365, 240);
context.lineTo(380, 375);
context.stroke();
context.beginPath();
context.moveTo(390, 240);
context.lineTo(400, 375);
context.stroke();
context.beginPath();
context.moveTo(415, 240);
context.lineTo(420, 375);
context.stroke();
context.beginPath();
context.moveTo(440, 240);
context.lineTo(440, 375);
context.stroke();
context.beginPath();
context.moveTo(470, 240);
context.lineTo(460, 375);
context.stroke();
///Cupcake Frosting///
context.beginPath();
context.moveTo(305, 190);
context.bezierCurveTo(275, 200, 275, 230, 300, 250);
context.bezierCurveTo(325, 258, 345, 250, 350, 235);
context.bezierCurveTo(350, 275, 375, 280, 400, 275);
context.bezierCurveTo(425, 270, 430, 255, 430, 242);
context.bezierCurveTo(448, 253, 460, 260, 475, 260);
context.bezierCurveTo(500, 260, 535, 235, 495, 190);
context.bezierCurveTo(500, 125, 450, 105, 430, 105);
context.bezierCurveTo(315, 95, 300, 150, 305, 190);
context.closePath();
context.lineWidth=5;
context.fillStyle= 'white';
context.fill();
context.stroke();
///Sprinkles on Cupcake///
context.beginPath();
context.moveTo(380, 190);
context.lineTo(400, 180);
context.lineWidth=5;
context.strokeStyle= '#FEFE03';
context.stroke();
context.beginPath();
context.moveTo(348, 150);
context.lineTo(366, 140);
context.strokeStyle= '#FE0307';
context.stroke();
context.beginPath();
context.moveTo(458, 130);
context.lineTo(475, 153);
context.strokeStyle= '#3503FE';
context.stroke();
context.beginPath();
context.moveTo(415, 160);
context.lineTo(430, 175);
context.strokeStyle= '#C80FE9';
context.stroke();
context.beginPath();
context.moveTo(325, 205);
context.lineTo(340, 224);
context.strokeStyle= '#05B726';
context.stroke();
context.beginPath();
context.moveTo(435, 210);
context.lineTo(418, 230);
context.strokeStyle= '#FF921C';
context.stroke();
context.beginPath();
context.moveTo(375, 240);
context.lineTo(390, 250);
context.strokeStyle= '#1CFFF0';
context.stroke();
context.beginPath();
context.moveTo(480, 210);
context.lineTo(500, 230);
context.strokeStyle= '#F00068';
context.stroke();
///Cherry///
context.beginPath();
context.arc(400, 90, 30, 0 , 2 * Math.PI, false);
context.fillStyle= 'rgb(255, 0, 0)';
context.fill();
context.strokeStyle= 'black';
context.stroke();
///Cherry Stem///
context.beginPath();
context.moveTo(400, 60);
context.bezierCurveTo(405, 50, 375, 15, 350, 23);
context.stroke();
///Music Staff///
context.beginPath();
context.moveTo(0, 350);
context.bezierCurveTo(50, 340, 110, 340, 145, 370);
context.bezierCurveTo(200, 425, 400, 440, 530, 400);
context.bezierCurveTo(600, 375, 675, 360, 800, 360);
context.lineWidth=2;
context.stroke();
context.beginPath();
context.moveTo(0, 375);
context.bezierCurveTo(50, 365, 110, 365, 145, 395);
context.bezierCurveTo(200, 450, 400, 465, 530, 425);
context.bezierCurveTo(600, 400, 675, 385, 800, 385);
context.stroke();
context.beginPath();
context.moveTo(0, 400);
context.bezierCurveTo(50, 390, 110, 390, 145, 420);
context.bezierCurveTo(200, 475, 400, 490, 530, 450);
context.bezierCurveTo(600, 425, 675, 410, 800, 410);
context.stroke();
context.beginPath();
context.moveTo(0, 425);
context.bezierCurveTo(50, 415, 110, 415, 145, 445);
context.bezierCurveTo(200, 500, 400, 515, 530, 475);
context.bezierCurveTo(600, 450, 675, 435, 800, 435);
context.stroke();
context.beginPath();
context.moveTo(0, 450);
context.bezierCurveTo(50, 440, 110, 440, 145, 470);
context.bezierCurveTo(200, 525, 400, 540, 530, 500);
context.bezierCurveTo(600, 475, 675, 460, 800, 460);
context.stroke();
context.beginPath();
context.moveTo(5, 350);
context.lineTo(5, 450);
context.lineWidth=8;
context.lineCap= 'butt';
context.stroke();
context.beginPath();
context.moveTo(15, 348);
context.lineTo(15, 448);
context.lineWidth=2;
context.stroke();
///Microphone///
context.beginPath();
context.moveTo(600, 600);
context.bezierCurveTo(540, 540, 620, 490, 720, 300);
context.bezierCurveTo(750, 250, 750, 200, 725, 190);
context.lineWidth=10;
context.stroke();
context.beginPath();
context.moveTo(720, 200);
context.lineTo(728, 180);
context.lineTo(640, 130);
context.lineTo(630, 160);
context.lineTo(720, 200);
context.lineWidth=3;
context.fillStyle= 'black';
context.fill();
context.stroke();
context.beginPath();
context.arc(610, 133, 30, 0, 2*Math.PI, false);
context.lineWidth=5;
context.fillStyle= 'rgb(100, 100, 100)';
context.fill();
context.stroke();
context.beginPath();
context.moveTo(598, 163);
context.lineTo(623, 103);
context.lineWidth=8;
context.lineCap= 'round';
context.stroke();
///Music Notes///
context.beginPath();
context.arc(50, 420, 10, 0, 2 * Math.PI, false);
context.fillStyle= 'black';
context.fill();
context.lineWidth=2;
context.stroke();
context.beginPath();
context.moveTo(60, 420);
context.lineTo(60, 335);
context.lineCap= 'butt';
context.stroke();
context.beginPath();
context.arc(110, 400, 10, 0, 2*Math.PI, false);
context.fillStyle= 'black';
context.fill();
context.stroke();
context.beginPath();
context.arc(140, 430, 10, 0, 2*Math.PI, false);
context.fillStyle= 'black';
context.fill();
context.stroke();
context.beginPath();
context.moveTo(120, 400);
context.lineTo(120, 330);
context.stroke();
context.beginPath();
context.moveTo(120, 330);
context.lineTo(150, 340);
context.lineWidth=8;
context.stroke();
context.beginPath();
context.moveTo(150, 340);
context.lineTo(150, 430);
context.lineWidth=2;
context.stroke();
context.beginPath();
context.arc(200, 413, 10, 0, 2*Math.PI, false);
context.fillStyle= 'black';
context.fill();
context.stroke();
context.beginPath();
context.moveTo(190, 413);
context.lineTo(190, 503);
context.stroke();
context.beginPath();
context.arc(260, 453, 10, 0, 2*Math.PI, false);
context.fillStyle= 'black';
context.fill();
context.stroke();
context.beginPath();
context.moveTo(250, 453);
context.lineTo(250, 543);
context.stroke();
context.beginPath();
context.arc(330, 485, 10, 0, 2*Math.PI, false);
context.fillStyle= 'black';
context.fill();
context.stroke();
context.beginPath();
context.moveTo(340, 485);
context.lineTo(340, 410);
context.stroke();
context.beginPath();
context.moveTo(340, 410);
context.lineTo(380, 405);
context.lineWidth=8;
context.stroke();
context.beginPath();
context.moveTo(380, 405);
context.lineTo(380, 460);
context.lineWidth=2;
context.stroke();
context.beginPath();
context.arc(370, 460, 10, 0, 2*Math.PI, false);
context.fillStyle= 'black';
context.fill();
context.stroke();
context.beginPath();
context.arc(415, 470, 10, 0, 2*Math.PI, false);
context.fillStyle= 'black';
context.fill();
context.stroke();
context.beginPath();
context.moveTo(425, 470);
context.lineTo(425, 410);
context.stroke();
context.beginPath();
context.moveTo(425, 410);
context.lineTo(460, 415);
context.lineWidth=8;
context.stroke();
context.beginPath();
context.moveTo(460, 415);
context.lineTo(460, 480);
context.lineWidth=2;
context.stroke();
context.beginPath();
context.arc(450, 480, 10, 0, 2*Math.PI, false);
context.fillStyle= 'black';
context.fill();
context.stroke();
context.beginPath();
context.arc(490, 500, 10, 0, 2*Math.PI, false);
context.fillStyle= 'black';
context.fill();
context.stroke();
context.beginPath();
context.moveTo(500, 500);
context.lineTo(500, 420);
context.stroke();
context.beginPath();
context.arc(550, 458, 10, 0, 2*Math.PI, false);
context.fillStyle= 'black';
context.fill();
context.stroke();
context.beginPath();
context.moveTo(560, 458);
context.lineTo(560, 375);
context.stroke();
context.beginPath();
context.arc(600, 478, 10, 0, 2*Math.PI, false);
context.fillStyle= 'black';
context.fill();
context.stroke();
context.beginPath();
context.moveTo(610, 480);
context.lineTo(610, 400);
context.stroke();
context.beginPath();
context.arc(680, 415, 10, 0, 2*Math.PI, false);
context.fillStyle= 'black';
context.fill();
context.stroke();
context.beginPath();
context.moveTo(670, 415);
context.lineTo(670, 470);
context.stroke();
context.beginPath();
context.moveTo(670, 470);
context.lineTo(705, 460);
context.lineWidth=8;
context.stroke();
context.beginPath();
context.moveTo(705, 460);
context.lineTo(705, 400);
context.lineWidth=2;
context.stroke();
context.beginPath();
context.arc(715, 400, 10, 0, 2*Math.PI, false);
context.fillStyle= 'black';
context.fill();
context.stroke();
context.beginPath();
context.arc(760, 435, 10, 0, 2*Math.PI, false);
context.fillStyle= 'black';
context.fill();
context.stroke();
context.beginPath();
context.moveTo(770, 435);
context.lineTo(770, 360);
context.stroke();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
No comments:
Post a Comment