Canvas Project

 Blossom; Powerpuff Girl

by: Nicole Nowak

I was able to create the main character, Blossom, from The Powerpuff Girls in Dreamweaver using HTML Canvas. My image consists of various shapes including rectangles, circles, half circles, arcs, bezier curves, hearts, lines, and more. Each being different sizes, colors, etc. I chose Blossom because I wanted to do a cartoon character from a show I used to watch, and Blossom just seemed like a fun character to recreate. I wanted to do all three characters, including Bubbles and Buttercup, but that would have taken me triple the amount of time I spent, so I just chose Blossom alone. This project took me about 10 hours to complete over the span of a few days. 

Using Dreamweaver is very fun and is a great creative outlet, but can get very frustrating to work with. There were things I did not know how to recreate in Dreamweaver so I had to get creative. It was a lot of just playing around with the application. As I got further into my project, it started to become a little bit easier each time. Practice makes perfect. I kept a picture of my image open on my phone while I worked on the code on my laptop. That way I can look right over to make sure my measurements and placements line up. Overall, I am pretty content with how my project came out. There’s definitely things I can work on and improve on, but for a first time Dreamweaver user and coder, I think it is for sure a start!

Time Spent: 10 hours

Inspiration

Sketch

Code

//Background

var y = 0;

var x = 0;

var width = canvas.width;

var height = canvas.height;

context.beginPath();

context.rect(x, y, width, height);

context.fillStyle = 'rgba(170,221,255,1.00)';

context.fill();

//Heart Pink and Blue var Ax = 400; var Ay = 125; var Bx = 400; var By = 650; var control1x = 100; var control1y = -150; var control2x = -350; var control2y = 215; var control3x = 1150; var control3y = 215; var control4x = 700; var control4y = -150; context.beginPath(); context.moveTo(Ax, Ay); context.bezierCurveTo(control1x, control1y, control2x, control2y, Bx, By); context.bezierCurveTo(control3x, control3y, control4x, control4y, Ax, Ay); context.lineWidth = 50; // line color context.strokeStyle = 'rgba(242,74,143,1.00)'; context.lineCap = 'round'; context.stroke(); context.fillStyle = 'rgba(90,162,245,1.00)'; context.fill();   //Heart Green and Blue var Ax = 400; var Ay = 185; var Bx = 400; var By = 580; var control1x = 125; var control1y = -100; var control2x = -225; var control2y = 215; var control3x = 1025; var control3y = 215; var control4x = 675; var control4y = -100; context.beginPath(); context.moveTo(Ax, Ay); context.bezierCurveTo(control1x, control1y, control2x, control2y, Bx, By); context.bezierCurveTo(control3x, control3y, control4x, control4y, Ax, Ay); context.lineWidth = 50; // line color context.strokeStyle = 'rgba(26,130,28,1.00)'; context.lineCap = 'round'; context.stroke(); context.fillStyle = 'rgba(183,228,248,1.00)'; context.fill(); //Pink trail context.beginPath(); context.moveTo(400,580) context.lineTo(500, 518); context.lineTo(450,200) context.lineTo(350,200); context.lineTo(300,518) context.lineTo(400, 580); context.fillStyle = 'rgba(234,93,191,1.00)'; context.lineWidth = 20; // STROKE WIDTH context.strokeStyle = 'rgba(234,93,191,1.00)'; context.fill(); context.stroke(); // STROKE //Hair in Back var x = 355; var y = 275; var controlX = 365; var controlY = 370; var x1 = 335; var y1 = 335; var controlX1 = 400; var controlY1 = 460; var x2 = 465; var y2 = 335; var controlX2 = 435; var controlY2 = 370 var x3 = 445; var y3 = 275; context.beginPath(); context.moveTo(x, y); context.quadraticCurveTo(controlX, controlY, x1, y1); context.quadraticCurveTo(controlX1, controlY1, x2, y2); context.quadraticCurveTo(controlX2, controlY2, x3, y3); context.fillStyle = 'rgba(255,132,27,1.00)'; context.fill(); context.lineWidth = 2; context.strokeStyle = "black"; context.stroke(); context.beginPath(); context.moveTo(365,360) context.lineTo(360, 374); context.lineWidth = 2; // STROKE WIDTH context.strokeStyle = 'black'; context.stroke(); // STROKE context.beginPath(); context.moveTo(400,384) context.lineTo(400, 397); context.lineWidth = 2; // STROKE WIDTH context.strokeStyle = 'black'; context.stroke(); // STROKEcontext.beginPath(); context.moveTo(435,360) context.lineTo(440, 374); context.lineWidth = 2; // STROKE WIDTH context.strokeStyle = 'black'; context.stroke(); // STROKE //Left Arm var x = 375; var y = 280; var controlX = 360; var controlY = 305; var x1 = 340; var y1 = 290; var controlX1 = 340; var controlY1 = 325; var x2 = 375; var y2 = 310; context.beginPath(); context.moveTo(x, y); context.quadraticCurveTo(controlX, controlY, x1, y1); context.quadraticCurveTo(controlX1, controlY1, x2, y2); context.fillStyle = 'rgba(244,230,207,1.00)'; context.fill(); context.lineWidth = 2; context.strokeStyle = "black"; context.stroke(); //Right Arm var x = 460; var y = 165; var controlX = 470; var controlY = 100; var x1 = 470; var y1 = 100; var controlX1 = 510; var controlY1 = 120; var x2 = 470; var y2 = 190; context.beginPath(); context.moveTo(x, y); context.quadraticCurveTo(controlX, controlY, x1, y1); context.quadraticCurveTo(controlX1, controlY1, x2, y2); context.fillStyle = 'rgba(244,230,207,1.00)'; context.fill(); context.lineWidth = 2; context.strokeStyle = "black"; context.stroke(); //Body var rectx2 = 375; var recty2 = 285; var rectwidth2 = 45; var rectheight2 = 50; context.beginPath(); context.rect(rectx2,recty2,rectwidth2,rectheight2); context.lineWidth = 2; context.strokeStyle = 'rgba(0,0,0,1.00)'; context.fillStyle = 'rgba(234,93,191,1.00)'; context.fill(); context.stroke(); //Rectangle on Shirt var rectx2 = 375; var recty2 = 300; var rectwidth2 = 45; var rectheight2 = 20; context.beginPath(); context.rect(rectx2,recty2,rectwidth2,rectheight2); context.lineWidth = 2; context.strokeStyle = 'rgba(0,0,0,1.00)'; context.fillStyle = 'rgba(0,0,0,1.00)'; context.fill(); context.stroke(); //Right Leg var rectx2 = 395; var recty2 = 335; var rectwidth2 = 25; var rectheight2 = 30; context.beginPath(); context.rect(rectx2,recty2,rectwidth2,rectheight2); context.lineWidth = 2; context.strokeStyle = 'rgba(0,0,0,1.00)'; context.fillStyle = 'rgba(255,255,255,1.00)'; context.fill(); context.stroke(); //Left Leg var rectx2 = 375; var recty2 = 315; var rectwidth2 = 25; var rectheight2 = 25; context.beginPath(); context.rect(rectx2,recty2,rectwidth2,rectheight2); context.lineWidth = 2; context.strokeStyle = 'rgba(0,0,0,1.00)'; context.fillStyle = 'rgba(255,255,255,1.00)'; context.fill(); context.stroke(); //Top of Left Shoe var rectx2 = 375; var recty2 = 340; var rectwidth2 = 25; var rectheight2 = 10; context.beginPath(); context.rect(rectx2,recty2,rectwidth2,rectheight2); context.lineWidth = 2; context.strokeStyle = 'rgba(0,0,0,1.00)'; context.fillStyle = 'rgba(0,0,0,1.00)'; context.fill(); context.stroke(); //Tip of Left Shoe var centerX = 387.5; var centerY = 350 var radius = 13.5; var startangle = 0* Math.PI;; var endangle = 1* Math.PI; context.beginPath(); context.arc(centerX, centerY, radius, startangle, endangle, false); context.fillStyle = "black"; context.fill(); context.lineWidth = 5; //White Tip of Left Shoe var centerX = 387.5; var centerY = 347 var radius = 8; var startangle = 0* Math.PI;; var endangle = 1* Math.PI; context.beginPath(); context.arc(centerX, centerY, radius, startangle, endangle, false); context.fillStyle = "white"; context.fill(); context.lineWidth = 5; //Bow var Ax = 400; var Ay = 150; var Bx = 400; var By = 150; var control1x = 400; var control1y = -150; var control2x = 255; var control2y = 200; var control3x = 545; var control3y = 200; var control4x = 400; var control4y = -150; context.beginPath(); context.moveTo(Ax, Ay); context.bezierCurveTo(control1x, control1y, control2x, control2y, Bx, By); context.bezierCurveTo(control3x, control3y, control4x, control4y, Ax, Ay); context.lineWidth = 4; // line color context.strokeStyle = 'black'; context.lineCap = 'round'; context.stroke(); context.fillStyle = 'rgba(221,61,38,1.00)'; context.fill();     //Center of Bow var centerX = 400; var centerY = 140 var radius = 12; var startangle = 0* Math.PI;; var endangle = 1* Math.PI; context.beginPath(); context.arc(centerX, centerY, radius, startangle, endangle, true); context.lineWidth = 4; context.strokeStyle = "rgba(0,0,0,1.00)"; context.stroke(); context.fillStyle = 'rgba(221,61,38,1.00)'; context.fill(); //Head var centerX = 400; var centerY = 215; var radius = 75; var startangle = 0; var endangle = 2 * Math.PI; context.beginPath(); context.arc(centerX, centerY, radius, startangle, endangle, false); context.lineWidth = 4; context.strokeStyle = "rgba(0,0,0,1.00)"; context.stroke(); context.fillStyle = "rgba(244,230,207,1.00)"; context.fill(); //Mouth var x = 415; var y = 235; var controlX = 400; var controlY = 245; var x1 = 385; var y1 = 235; var controlX1 = 400; var controlY1 = 285; var x2 = 415; var y2 = 235; context.beginPath(); context.moveTo(x, y); context.quadraticCurveTo(controlX, controlY, x1, y1); context.quadraticCurveTo(controlX1, controlY1, x2, y2); context.fillStyle = 'rgba(137,50,65,1.00)'; context.fill(); context.lineWidth = 2; context.strokeStyle = "black"; context.stroke(); //Tongue var centerX = 400; var centerY = 255 var radius = 2; var startangle = 0* Math.PI;; var endangle = 1* Math.PI; context.beginPath(); context.arc(centerX, centerY, radius, startangle, endangle, true); context.fillStyle = "rgba(209,98,122,1.00)"; context.fill(); context.lineWidth = 5; context.strokeStyle = "rgba(209,98,122,1.00)"; context.stroke(); //Left Eye //White var centerX = 351; var centerY = 215; var radius = 27; var startangle = 0; var endangle = 2 * Math.PI; context.beginPath(); context.arc(centerX, centerY, radius, startangle, endangle, false); context.lineWidth = 3; context.strokeStyle = "black"; context.stroke(); context.fillStyle = "white"; context.fill(); //Pink var centerX = 353.5; var centerY = 212; var radius = 14; var startangle = 0; var endangle = 2 * Math.PI; context.beginPath(); context.arc(centerX, centerY, radius, startangle, endangle, false); context.lineWidth = 20; context.strokeStyle = "rgba(252,164,203,1.00)"; context.stroke(); context.fillStyle = "rgba(252,164,203,1.00)"; context.fill(); //Black var centerX = 358; var centerY = 210; var radius = 18; var startangle = 0; var endangle = 2 * Math.PI; context.beginPath(); context.arc(centerX, centerY, radius, startangle, endangle, false); context.lineWidth = 3; context.strokeStyle = "black"; context.stroke(); context.fillStyle = "black"; context.fill(); //White var centerX = 362; var centerY = 204; var radius = 7; var startangle = 0; var endangle = 2 * Math.PI; context.beginPath(); context.arc(centerX, centerY, radius, startangle, endangle, false); context.lineWidth = 3; context.strokeStyle = "white"; context.stroke(); context.fillStyle = "white"; context.fill(); //Right Eye //White var centerX = 449; var centerY = 215; var radius = 27; var startangle = 0; var endangle = 2 * Math.PI; context.beginPath(); context.arc(centerX, centerY, radius, startangle, endangle, false); context.lineWidth = 3; context.strokeStyle = "black"; context.stroke(); context.fillStyle = "white"; context.fill(); //Pink var centerX = 446.5; var centerY = 212; var radius = 14; var startangle = 0; var endangle = 2 * Math.PI; context.beginPath(); context.arc(centerX, centerY, radius, startangle, endangle, false); context.lineWidth = 20; context.strokeStyle = "rgba(252,164,203,1.00)"; context.stroke(); context.fillStyle = "rgba(252,164,203,1.00)"; context.fill(); //Black var centerX = 442; var centerY = 210; var radius = 18; var startangle = 0; var endangle = 2 * Math.PI; context.beginPath(); context.arc(centerX, centerY, radius, startangle, endangle, false); context.lineWidth = 3; context.strokeStyle = "black"; context.stroke(); context.fillStyle = "black"; context.fill(); //White var centerX = 438; var centerY = 204; var radius = 7; var startangle = 0; var endangle = 2 * Math.PI; context.beginPath(); context.arc(centerX, centerY, radius, startangle, endangle, false); context.lineWidth = 3; context.strokeStyle = "white"; context.stroke(); context.fillStyle = "white"; context.fill(); //Top of Right Shoe var rectx2 = 395; var recty2 = 365; var rectwidth2 = 25; var rectheight2 = 10; context.beginPath(); context.rect(rectx2,recty2,rectwidth2,rectheight2); context.lineWidth = 2; context.strokeStyle = 'rgba(0,0,0,1.00)'; context.fillStyle = 'rgba(0,0,0,1.00)'; context.fill(); context.stroke(); //Tip of Right Shoe var centerX = 407.5; var centerY = 375 var radius = 13.5; var startangle = 0* Math.PI;; var endangle = 1* Math.PI; context.beginPath(); context.arc(centerX, centerY, radius, startangle, endangle, false); context.fillStyle = "black"; context.fill(); context.lineWidth = 5; //White Tip of Right Shoe var centerX = 407.5; var centerY = 372 var radius = 8; var startangle = 0* Math.PI;; var endangle = 1* Math.PI; context.beginPath(); context.arc(centerX, centerY, radius, startangle, endangle, false); context.fillStyle = "white"; context.fill(); context.lineWidth = 5; //Hair Outline var x = 330; var y = 185; // control point coordinates ( magnet ) var cpointX = canvas.width / 2 - 0; var cpointY = canvas.height / 2 - 212; // ending point coordinates var x1 = 470; var y1 = 185; context.beginPath(); context.moveTo(x, y); context.quadraticCurveTo(cpointX, cpointY, x1, y1); context.lineTo(330, 185); context.lineTo(350, 185); context.lineTo(363, 168); context.lineTo(363, 185); context.lineTo(385, 185); context.lineTo(400, 160); context.lineTo(415, 185); context.lineTo(437, 185); context.lineTo(437, 168); context.lineTo(450, 185); context.lineTo(470, 185); context.fillStyle = "rgba(255,132,27,1.00)"; context.fill(); context.lineWidth = 2; context.strokeStyle = "black"; context.stroke();