Canvas Project

    My canvas project was created in Dreamweaver using HTML Canvas to create Eeyore out of code. My image consists of shapes, bezier curves, quadratic curves, and the background is gradient. The inspiration for my piece is pictured below. I wanted to make Eeyore because he is my favorite Winnie the Pooh character and I think he is super cute. Instead of making the traditional looking Eeyore, I wanted to play with shapes, so I went for a more modern simplistic looking character. I worked on this piece over the span of a week and worked a few hours a day. It took me about twelve hours to do in total. 

    This was my first-time using Dreamweaver, but I really enjoyed it. It was extremely overwhelming at first, but once I started to understand how the codes worked and how to manipulate the shapes into the spots and sizes I wanted, it become really fun and creative. What helped me the most while creating this piece, was to open the project in a browser while I was working on it in Dreamweaver. This helped me to locate the exact coordinates I wanted every shape, curve, and edge to be at, allowing me to get correct proportions and symmetry. Overall, I am very happy with how my canvas project came out. My image is colorful, symmetrical, proportional and full of different shapes, creating an enjoyable fun image to look at. 

Inspiration:

Sketch: 

Code: 

//background

     

    var bkgdgrd = context.createLinearGradient(0,0,0,600);

 

    bkgdgrd.addColorStop(.60,"rgba(74,214,248,1.00)");

    bkgdgrd.addColorStop(.10, "rgba(162,94,247,1.00)");

    bkgdgrd.addColorStop(.70,"rgba(41,0,237,1.00)");

    bkgdgrd.addColorStop(1,"rgba(171,29,184,1.00)");

 

     

// BACKGROUND

 

    context.beginPath();

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

 

    context.closePath();

 

    context.fillStyle = bkgdgrd;

 

    context.fill();

//triangle on tail

   context.beginPath();

    

    context.moveTo(500,315);

    

context.lineTo(495, 360);

    context.lineTo(505, 360);

    

    context.closePath();

context.strokeStyle = 'rgba(0,0,0,1.00)';

      context.stroke();

context.lineCap = 'round';

    context.stroke();

context.fillStyle   = 'rgba(0,0,0,1.00)';

        context.fill();

//bow on tail

var Ax = 500;

var Ay = 360;

var Bx = 500;

var By = 380;

var control1x = 480;

var control1y = 320;

var control2x = 460;

var control2y = 318;

var control3x = 540;

var control3y = 318;

var control4x = 520;

var control4y = 320;

        context.beginPath();

        context.moveTo(Ax, Ay);

        context.bezierCurveTo(control1x, control1y, control2x, control2y, Bx, By);

        context.bezierCurveTo(control3x, control3y, control4x, control4y, Ax, Ay);

        context.lineWidth = 3;

        // line color

        context.strokeStyle = 'rgba(0,0,0,1.00)';

        context.lineCap = 'round';

        context.stroke();

        context.fillStyle   = 'rgba(243,134,253,1.00)';

        context.fill();

// tail 

var x=492;

var y=368;

var width = 16;

var height= 107;

context.beginPath();

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

context.lineWidth = 2;

context.fillStyle = 'rgba(56,138,235,1.00)';

context.strokeStyle = 'rgba(0,0,0,1.00)';

context.fill(); 

context.stroke();

// Left ear

// top half of ear

      var centerX = canvas.width / 1.9;

      context.beginPath();

      context.moveTo(230, 190);

      context.quadraticCurveTo(275, 120, 400, 137);

      context.lineWidth = 3;

      // line color

      context.strokeStyle = 'black';

      context.stroke();

context.lineCap = 'round';

context.stroke();

context.fillStyle   = 'rgba(56,138,235,1.00)';

        context.fill();

//lower half of ear

   var centerX = canvas.width / 1.9;

      context.beginPath();

      context.moveTo(230, 190);

      context.quadraticCurveTo(300, 220, 400, 137);

      context.lineWidth = 3;

      // line color

      context.strokeStyle = 'black';

      context.stroke();

context.lineCap = 'round';

context.stroke();

context.fillStyle   = 'rgba(243,134,253,1.00)';

        context.fill();     

////circle face

 

  var centerX = canvas.width / 2;

        var centerY = canvas.height / 3;

        var radius = 70;

        var startangle = 0;

        var endangle = 2 * Math.PI;

        context.beginPath();

        context.arc(centerX, centerY, radius, startangle, endangle, false);

    

        context.lineWidth = 3;

        context.strokeStyle = "#000000";

        context.stroke();

context.fillStyle   = 'rgba(56,138,235,1.00)';

        context.fill();

// right ear

// top half of ear

      var centerX = canvas.width / 1.9;

      context.beginPath();

      context.moveTo(440, 140);

      context.quadraticCurveTo(520, 150, 520, 260);

      context.lineWidth = 3;

      // line color

      context.strokeStyle = 'black';

      context.stroke();

context.lineCap = 'round';

context.stroke();

context.fillStyle   = 'rgba(56,138,235,1.00)';

        context.fill();

//lower half of ear

   var centerX = canvas.width / 1.9;

      context.beginPath();

      context.moveTo(440, 140);

      context.quadraticCurveTo(430, 205, 520, 260);

      context.lineWidth = 3;

      // line color

      context.strokeStyle = 'black';

      context.stroke();

context.lineCap = 'round';

context.stroke();

context.fillStyle   = 'rgba(243,134,253,1.00)';

        context.fill();     

// triangle body

// TRIANGLE = POLYGON

    

    context.beginPath();

    

    context.moveTo(400,300);

    

context.lineTo(290, 480);

    context.lineTo(510, 480);

    

    context.closePath();

context.lineCap = 'round';

    context.stroke();

context.fillStyle   = 'rgba(56,138,235,1.00)';

        context.fill();

// inside triangle

// TRIANGLE = POLYGON

    

    context.beginPath();

    

    context.moveTo(400,350);

    

context.lineTo(320, 477);

    context.lineTo(480, 477);

    

    context.closePath();

context.strokeStyle = 'rgba(152,144,243,1.00)';

      context.stroke();

context.lineCap = 'round';

    context.stroke();

context.fillStyle   = 'rgba(152,144,243,1.00)';

        context.fill();

/// oval lower face

     var centerX = 0;

      var centerY = 0;

      var radius = 45;

      // save state

      context.save();

      // translate context

      context.translate(canvas.width / 2, canvas.height / 2.15);

      // scale context horizontally

      context.scale(2, 1);

      // draw circle which will be stretched into an oval

      context.beginPath();

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

      // restore to original state

      context.restore();

      // apply styling

      context.fillStyle = 'rgba(250,217,170,1.00)';

      context.fill();

      context.lineWidth = 2;

      context.strokeStyle = 'black';

      context.stroke();

/// line down face 

context.moveTo(400,130); // COORDINATES OF STARTING POINT

context.lineTo(400,324); // COORDS OF ENDING POINT 1

context.lineWidth = 2; // STROKE WIDTH

context.stroke(); // STROKE

/// top horizontal line on nose

context.moveTo(390,245); // COORDINATES OF STARTING POINT

context.lineTo(410,245); // COORDS OF ENDING POINT 1

context.lineWidth = 2; // STROKE WIDTH

context.stroke(); // STROKE

/// bottom horizontal line on nose

context.moveTo(390,253); // COORDINATES OF STARTING POINT

context.lineTo(410,253); // COORDS OF ENDING POINT 1

context.lineWidth = 2; // STROKE WIDTH

context.stroke(); // STROKE

//hair

context.beginPath();

      context.moveTo(393, 120);

   

      context.quadraticCurveTo(400,85,405,120);

   context.quadraticCurveTo(425,112,409,128);

   context.quadraticCurveTo(420,160,396,133);

      context.quadraticCurveTo(376,155,390,128);

   context.quadraticCurveTo(366, 105,393,120);

      var grd = context.createRadialGradient(100, 200, 5, 290, 40, 200);

      grd.addColorStop(0, "rgba(0,0,0,1.00)");

      grd.addColorStop(1, "rgba(0,0,0,1.00)");

      context.fillStyle = grd;

      context.fill();

      context.lineWidth = 2.5;

      context.strokeStyle = "rgba(0,0,0,1.00)";

      context.stroke();

 ////left eye 

 

  var centerX = canvas.width / 2.1;

        var centerY = canvas.height / 3;

        var radius = 3;

        var startangle = 0;

        var endangle = 3 * Math.PI;

        context.beginPath();

        context.arc(centerX, centerY, radius, startangle, endangle, false);

    

        context.lineWidth = 5;

        context.strokeStyle = "#000000";

        context.stroke();

context.fillStyle   = 'rgba(0,0,0,1.00)';

        context.fill();

////right eye 

 

  var centerX = canvas.width / 1.9;

        var centerY = canvas.height / 3;

        var radius = 3;

        var startangle = 0;

        var endangle = 3 * Math.PI;

        context.beginPath();

        context.arc(centerX, centerY, radius, startangle, endangle, false);

    

        context.lineWidth = 5;

        context.strokeStyle = "#000000";

        context.stroke();

context.fillStyle   = 'rgba(0,0,0,1.00)';

        context.fill();

/// eye brow

var centerX = canvas.width / 1.9;

      context.beginPath();

      context.moveTo(356, 182);

      context.quadraticCurveTo(362, 167, 379, 162); 

      context.lineWidth = 4;

      // line color

      context.strokeStyle = 'black';

      context.stroke();

/// smile

var centerX = canvas.width / 1.9;

      context.beginPath();

      context.moveTo(380, 295);

      context.quadraticCurveTo(400,325, 420, 295); 

      context.lineWidth = 4;

      // line color

      context.strokeStyle = 'black';

      context.stroke();

// left nostril  

var x=380;

var y=265;

var width = 8

var height= 5;

context.beginPath();

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

context.lineWidth = 1;

context.fillStyle = 'rgba(0,0,0,1.00)';

context.strokeStyle = 'rgba(0,0,0,1.00)';

context.fill(); 

context.stroke();

// right nostril  

var x=415;

var y=265;

var width = 8

var height= 5;

context.beginPath();

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

context.lineWidth = 1;

context.fillStyle = 'rgba(0,0,0,1.00)';

context.strokeStyle = 'rgba(0,0,0,1.00)';

context.fill(); 

context.stroke();

// left arm

var centerX = canvas.width / 1.9;

      context.beginPath();

      context.moveTo(345, 405);

      context.quadraticCurveTo(430,550, 385, 370); 

      context.lineWidth = 2;

context.fillStyle = 'rgba(56,138,235,1.00)';

context.strokeStyle = 'rgba(0,0,0,1.00)';

context.fill(); 

context.stroke();

      // line color

      context.strokeStyle = 'black';

      context.stroke();

// right arm

var centerX = canvas.width / 1.9;

      context.beginPath();

      context.moveTo(455, 405);

      context.quadraticCurveTo(370,550, 415, 370); 

      context.lineWidth = 2;

context.fillStyle = 'rgba(56,138,235,1.00)';

context.strokeStyle = 'rgba(0,0,0,1.00)';

context.fill(); 

context.stroke();

      // line color

      context.strokeStyle = 'black';

      context.stroke();

//right leg

context.beginPath();

    

    context.moveTo(515,438);

    

context.lineTo(420, 480);

    context.lineTo(525, 480);

    

    context.closePath();

context.strokeStyle = 'rgba(0,0,0,1.00)';

      context.stroke();

context.lineCap = 'round';

    context.stroke();

context.fillStyle   = 'rgba(56,138,235,1.00)';

        context.fill();

//left leg

context.beginPath();

    

    context.moveTo(285,438);

    

context.lineTo(380, 480);

    context.lineTo(275, 480);

    

    context.closePath();

context.strokeStyle = 'rgba(0,0,0,1.00)';

      context.stroke();

context.lineCap = 'round';

    context.stroke();

context.fillStyle   = 'rgba(56,138,235,1.00)';

        context.fill();

//left foot circle

 var centerX = canvas.width / 2.8;

        var centerY = canvas.height / 1.305;

        var radius = 22;

        var startangle = 0;

        var endangle = 2 * Math.PI;

        context.beginPath();

        context.arc(centerX, centerY, radius, startangle, endangle, false);

 

 context.fillStyle = 'rgba(56,138,235,1.00)';

 context.fill();

                context.lineWidth = 2;

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

        context.stroke();

//left foot inner circle

 var centerX = canvas.width / 2.8;

        var centerY = canvas.height / 1.305;

        var radius = 14;

        var startangle = 0;

        var endangle = 2 * Math.PI;

        context.beginPath();

        context.arc(centerX, centerY, radius, startangle, endangle, false);

 

 context.fillStyle = 'rgba(152,144,243,1.00)';

 context.fill();

                context.lineWidth = 2;

        context.strokeStyle = "rgba(152,144,243,1.00)";

        context.stroke();

//right foot circle

 var centerX = canvas.width / 1.55;

        var centerY = canvas.height / 1.305;

        var radius = 22;

        var startangle = 0;

        var endangle = 2 * Math.PI;

        context.beginPath();

        context.arc(centerX, centerY, radius, startangle, endangle, false);

 

 context.fillStyle = 'rgba(56,138,235,1.00)';

 context.fill();

                context.lineWidth = 2;

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

        context.stroke();

//right foot inner circle

 var centerX = canvas.width / 1.55;

        var centerY = canvas.height / 1.305;

        var radius = 14;

        var startangle = 0;

        var endangle = 2 * Math.PI;

        context.beginPath();

        context.arc(centerX, centerY, radius, startangle, endangle, false);

 

 context.fillStyle = 'rgba(152,144,243,1.00)';

 context.fill();

                context.lineWidth = 2;

        context.strokeStyle = "rgba(152,144,243,1.00)";

        context.stroke();