I can officially say this project is the most time I have ever spent on schoolwork. It was very tedious and required a lot of time and patience. I thought that picking a picture with simple shapes like the clip art bumble bee would be easy to convert to HTML5 code. I drew out the whole image on my graph smoothy and assumed that all I would have to do was take the coordinates, plug them in and I would be done. However, I learned very fast that it was going to take a little longer than I expected. Throughout my project I used various circles, lines, rectangles, ovals, bezier and quadratic curves. I never realized how one code or shape can take you awhile, it is also frustrating to draw a shape and place it right where you want it when you have to rely on numbers and a invisible graph. The
biggest struggle that I faced were the eyes and cheeks because getting
an oval shape and trying to rotate it was too complex. Other setbacks I had were: my coordinates
on my sketch not matching up with the one on my canvas and forming the
image on an angle. In the end I think that with the exception of a few little placements my image came out awesome. Knowing how much effort and time I put into my project I am proud of this image especially for it being my first time using HTML5 coding.
My Image:
Original Image:
My Sketch/Graph:
The Code:
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
//Rectangle
context.beginPath();
context.rect(0, 0, canvas.width, canvas.height);
var grd = context.createLinearGradient(400, 400, 400, 600);
grd.addColorStop(0, 'rgb(255, 153, 153)');
grd.addColorStop(1, 'rgb(204, 255, 153)');
context.fillStyle = grd;
context.fill();
context.stroke();
//head
context.beginPath();
context.arc(252, 202, 100, 0, 2 * Math.PI, false);
context.fillStyle = 'rgb(244, 239, 64)';
context.fill();
context.lineWidth = 2;
context.strokeStyle = 'rgb(244, 239, 64)';
context.stroke();
// left eye
context.beginPath();
context.moveTo(190, 220);
context.bezierCurveTo(170, 185, 185, 170, 210, 200);
context.bezierCurveTo(240, 235, 225, 270, 190, 220);
context.strokeStyle = 'black';
context.fillStyle = 'black';
context.fill();
context.stroke();
//right eye
context.beginPath();
context.moveTo(270, 170);
context.bezierCurveTo(250, 135, 265, 120, 290, 150);
context.bezierCurveTo(320, 185, 305, 220, 270, 170);
context.strokeStyle = 'black';
context.fillStyle = 'black';
context.fill();
context.stroke();
//left cheek
context.save();
var centerX = -33;
var centerY = -115;
var radius = 5;
context.translate(canvas.width / 2, canvas.height / 2);
context.rotate(-60* Math.PI/360 );
context.scale(4, 1);
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.restore();
context.fillStyle = 'rgb(237, 102, 177)';
context.fill();
context.strokeStyle = 'rgb(237, 102, 177)';
context.stroke();
//right cheek
context.save();
var centerX = -3;
var centerY = -120;
var radius = 5;
context.translate(canvas.width / 2, canvas.height / 2);
context.rotate(-70* Math.PI/360 );
context.scale(4, 1);
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.restore();
context.fillStyle = 'rgb(237, 102, 177)';
context.fill();
context.strokeStyle = 'rgb(237, 102, 177)';
context.stroke();
//mouth
context.beginPath();
context.moveTo(260, 250);
context.lineTo(290, 230);
context.quadraticCurveTo(295, 265, 260, 250);
context.lineWidth = 4;
context.lineCap = 'round';
context.strokeStyle = 'black';
context.fillStyle = 'black';
context.fill();
context.stroke();
//antenae 1
context.beginPath();
context.moveTo(162, 138);
context.quadraticCurveTo(190, 120, 85, 120);
context.quadraticCurveTo(140, 120, 162, 138);
context.fillStyle = 'black';
context.fill();
context.strokeStyle = 'black';
context.stroke();
context.stroke();
//antenae 2
context.beginPath();
context.moveTo(230, 95);
context.quadraticCurveTo(217, 75, 235, 25);
context.quadraticCurveTo(205, 110, 230, 95);
context.fillStyle = 'black';
context.fill();
context.strokeStyle = 'black';
context.stroke();
//circle over antenae 1
context.beginPath();
context.arc(70, 120, 8, 0, 2 * Math.PI, false);
context.fillStyle = 'rgb(244, 239, 64)';
context.fill();
context.lineWidth = 1;
context.strokeStyle = 'rgb(244, 239, 64)';
context.stroke();
//circle over antenae 2
context.beginPath();
context.arc(240, 12, 8, 0, 2 * Math.PI, false);
context.fillStyle = 'rgb(244, 239, 64)';
context.fill();
context.lineWidth = 1;
context.strokeStyle = 'rgb(244, 239, 64)';
context.stroke();
//left wing
context.beginPath();
context.moveTo(260, 315);
context.quadraticCurveTo(200, 315, 170, 280);
context.bezierCurveTo(0, 300, 0, 500, 245, 425);
context.bezierCurveTo(140, 600, 300, 600, 330, 455);
context.quadraticCurveTo(235, 415, 260, 315);
context.fillStyle = 'rgb(193, 226, 244)';
context.fill();
context.lineWidth = 2;
context.strokeStyle = 'rgb(193, 226, 244)';
context.stroke();
//right wing
context.beginPath();
context.moveTo(360, 240);
context.quadraticCurveTo(370, 200, 358, 165);
context.bezierCurveTo(470, 0, 660, 100, 450, 290);
context.bezierCurveTo(600, 250, 620, 390, 465, 370);
context.quadraticCurveTo(460, 250, 360, 240);
context.fillStyle = 'rgb(193, 226, 244)';
context.fill();
context.lineWidth = 2;
context.strokeStyle = 'rgb(193, 226, 244)';
context.stroke();
//center body
context.beginPath();
context.moveTo(270, 315);
context.quadraticCurveTo(332, 310, 360, 250);
context.quadraticCurveTo(415, 260, 435, 295);
context.quadraticCurveTo(455, 335, 453, 378);
context.quadraticCurveTo(445, 430, 450, 470);
context.quadraticCurveTo(375, 460, 335, 445);
context.quadraticCurveTo(300, 430, 278, 400);
context.quadraticCurveTo(255, 360, 270, 315);
context.lineWidth = 5;
context.fillStyle = 'rgb(244, 239, 64)';
context.fill();
context.strokeStyle = 'rgb(244, 239, 64)';
context.stroke();
//first stripe
context.beginPath();
context.moveTo(270, 315);
context.quadraticCurveTo(332, 310, 359, 250);
context.quadraticCurveTo(383, 255, 385, 256);
context.quadraticCurveTo(345, 330, 263, 345);
context.quadraticCurveTo(265, 325, 270, 315);
context.lineWidth = 5;
context.fillStyle = 'black';
context.fill();
context.strokeStyle = 'black';
context.stroke();
//second stripe
context.beginPath();
context.moveTo(280, 400);
context.quadraticCurveTo(378, 378, 432, 290);
context.quadraticCurveTo(445, 300, 453, 350);
context.quadraticCurveTo(380, 425, 320, 438);
context.quadraticCurveTo(270, 400, 278, 400);
context.lineWidth = 5;
context.fillStyle = 'black';
context.fill();
context.strokeStyle = 'black';
context.stroke();
//bottom stripe
context.beginPath();
context.moveTo(400,464);
context.quadraticCurveTo(420, 460, 449, 425);
context.quadraticCurveTo(450, 450, 449, 470);
context.quadraticCurveTo(450, 475, 400, 465);
context.fillStyle = 'black';
context.fill();
context.lineWidth = 5;
context.strokeStyle = 'black';
context.stroke();
////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ
};
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
So how does it look? :)
