So in my graph, I started with more background objects, and a smaller cupcake. Overall, the design was the same, but some minor changes. Making the base of the cupcake larger, shifting the cupcake down a little...
And as time went on, I decided to make the cupcake the focal point, and thought that too many background objects made it look too busy (if that's even possible)
I also knew I wanted bright colors and more bright colors. I like cheery things, and what's better fitting for lots of colors than a cupcake?
The biggest challenge was that damn cherry stem. I couldn't ever quite get it where I wanted, and I knew I wanted it to have a loop. I used a bezier cure for the stem, and a quadratic curve for the cupcake top. The sprinkles also posed a challenge for me, but in the end I think I got a good result, though I would have loved more.
Here is my 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);
context.strokeStyle = 'rgb(153,0,255)';
var grd = context.createLinearGradient(400, 0, 400, 600);
grd.addColorStop(0, 'rgb(153,102,255)');
grd.addColorStop(1,'rgb(102,255,255)');
context.fillStyle= grd;
context.fill();
context.stroke();
//backgroundaccents
//circle row 1
context.beginPath();
context.arc(100,100, 80, 0 , 2 * Math.PI, false);
context.strokeStyle = 'rgb(51,153,255)';
context.fillStyle = 'rgb(51,153,255)';
context.fill();
context.stroke();
//triangle row 1
context.beginPath();
context.moveTo(400,10)
context.lineTo(300,150)
context.lineTo(500,150)
context.lineTo(400,10)
context.lineWidth = 5;
context.strokeStyle = 'rgb(255,102,153)';
context.fillStyle = 'rgb(255,102,153)';
context.fill();
context.stroke();
//circle row 1
context.beginPath();
context.arc(700,100, 80, 0 , 2 * Math.PI, false);
context.strokeStyle = 'rgb(51,153,255)';
context.fillStyle = 'rgb(51,153,255)';
context.fill();
context.stroke();
//circle row 2
context.beginPath();
context.arc(100,300, 80, 0 , 2 * Math.PI, false);
context.strokeStyle = 'rgb(51,153,255)';
context.fillStyle = 'rgb(51,153,255)';
context.fill();
context.stroke();
//circle row 2
context.beginPath();
context.arc(700,300, 80, 0 , 2 * Math.PI, false);
context.strokeStyle = 'rgb(51,153,255)';
context.fillStyle = 'rgb(51,153,255)';
context.fill();
context.stroke();
//circl row 3
context.beginPath();
context.arc(700, 500, 80, 0 , 2 * Math.PI, false);
context.strokeStyle = 'rgb(51,153,255)';
context.fillStyle = 'rgb(51,153,255)';
context.fill();
context.stroke();
//triagnle row 3
context.beginPath();
context.moveTo(400,590)
context.lineTo(300,510)
context.lineTo(500,510)
context.lineTo(400,590)
context.lineWidth = 5;
context.strokeStyle = 'rgb(255,0,153)';
context.fillStyle = 'rgb(255,0,153)';
context.fill();
context.stroke();
//circle row 3
context.beginPath();
context.arc(100, 500, 80, 0 , 2 * Math.PI, false);
context.strokeStyle = 'rgb(51,153,255)';
context.fillStyle = 'rgb(51,153,255)';
context.fill();
context.stroke();
//cupcake top
context.beginPath();
context.moveTo(200, 300);
context.quadraticCurveTo(400, 0, 600, 300);
context.strokeStyle= 'rgb(255,102,255)';
context.fillStyle= 'rgb(255,102,255)';
context.fill();
context.stroke();
//cupcake wrapper
context.beginPath();
context.moveTo(200,300)
context.lineTo(300,500)
context.lineTo(500,500)
context.lineTo(600,300)
context.lineTo(200,300)
context.strokeStyle = 'rgb(255,255,153)';
context.lineCap= 'round'
var grd = context.createLinearGradient(200, 300, 600, 300);
grd.addColorStop(0, 'rgb(255,255,153)');
grd.addColorStop(1,'rgb(255,153,0)');
context.fillStyle= grd;
context.fill();
context.stroke();
//sprinkle 1
context.beginPath();
context.moveTo(400,200)
context.lineTo(420,210)
context.lineWidth = 5;
context.strokeStyle = 'rgb(255,51,0)';
context.stroke();
//sprinkle 2
context.beginPath();
context.moveTo(500,200)
context.lineTo(520,210)
context.lineWidth = 5;
context.strokeStyle = 'rgb(0,204,255)';
context.stroke();
//sprinkle 3
context.beginPath();
context.moveTo(300,220)
context.lineTo(280,230)
context.lineWidth = 5;
context.strokeStyle = 'rgb(0,255,0)';
context.stroke();
//sprinkle 4
context.beginPath();
context.moveTo(330,220)
context.lineTo(310,230)
context.lineWidth = 5;
context.strokeStyle = 'rgb(204,0,255)';
context.stroke();
//sprinkle 5
context.beginPath();
context.moveTo(340,240)
context.lineTo(320,230)
context.lineWidth = 5;
context.strokeStyle = 'rgb(153,102,204)';
context.stroke();
//sprinkle 6
context.beginPath();
context.moveTo(340,240)
context.lineTo(320,230)
context.lineWidth = 5;
context.strokeStyle = 'rgb(255,255,51)';
context.stroke();
//sprinkle 7
context.beginPath();
context.moveTo(500,250)
context.lineTo(520,260)
context.lineWidth = 5;
context.strokeStyle= 'rgb(0,255,0)';
context.stroke();
//sprinkle 8
context.beginPath();
context.moveTo(400,250)
context.lineTo(420,240)
context.lineWidth = 5;
context.strokeStyle= 'rgb(0,0,240)';
context.stroke();
//sprinkle 9
context.beginPath();
context.moveTo(390,250)
context.lineTo(380,240)
context.lineWidth = 5;
context.strokeStyle= 'rgb(153,51,255)';
context.stroke();
//sprinkle 10
context.beginPath();
context.moveTo(240,250)
context.lineTo(260,240)
context.lineWidth = 5;
context.strokeStyle= 'rgb(102,102,255)';
context.stroke();
//sprinkle 11
context.beginPath();
context.moveTo(440,250)
context.lineTo(460,240)
context.lineWidth = 5;
context.strokeStyle= 'rgb(153,255,51)';
context.stroke();
//cherry
context.beginPath();
context.arc(400, 125, 30, 0 , 2 * Math.PI, false);
context.strokeStyle = 'rgb(255,0,51)';
context.fillStyle='rgb(255,0,51)';
context.fill();
context.stroke();
//cherry stem
context.beginPath();
context.moveTo(400,125)
context.bezierCurveTo(200, 10, 388, 10, 300, 100);
context.lineWidth = 10;
context.stroke();
//wrapper design 1
context.beginPath();
context.moveTo(200,300)
context.lineTo(250,350)
context.lineTo(300,300)
context.lineTo(350,350)
context.lineTo(400,300)
context.lineTo(450,350)
context.lineTo(500,300)
context.lineTo(550,350)
context.lineTo(600,300)
context.lineCap= 'round'
context.lineWidth = 5;
context.strokeStyle = 'rgb(153,204,255)';
context.stroke();
//wrapper design 2
context.beginPath();
context.moveTo(250,400)
context.lineTo(300,450)
context.lineTo(350,400)
context.lineTo(400,450)
context.lineTo(450,400)
context.lineTo(500,450)
context.lineTo(550,400)
context.lineCap= 'round'
context.strokeStyle = 'rgb(0,255,204)';
context.stroke();
////////////////////////////////////// end above this line
ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800"
height="600"></canvas>
</body>
</html>
No comments:
Post a Comment