Canvas Project

     

    My canvas project was created in Dreamweaver using HTML to create a cat and moon out of my code. My image consists of circles, triangles, rectangles, bezier curves, quadratic curves, and the background is gradient. My inspiration for my cat is pictured below. I wanted to make a cat because they are my favorite animals and I miss my cat at home. I tried to the best of my ability to follow my inspiration picture, but as you can tell my cat looks a little different. I wanted the color of the cats eye to stand out so I made everything else in the picture dark. I also wanted it to be at night and tried to get that affect with the gradient background. I worked on this piece for multiple hours a day over the span of a week. In total, it took me about ten hours to achieve the final product.

    This was my first-time using Dreamweaver and honestly doing any kind of coding. I was extremely overwhelmed when we got this assignment and didn't see myself being able to do anything. However, I started to get the hang of it and started understanding how to manipulate the shapes and realized it wasn't as daunting as it seemed. Something that helped me during this assignment was mapping out the coordinates for where I needed everything to go. This helped me know exactly where I needed to place everything and it helped me understand exactly what I needed to do. Overall, I am happy with my final product and I am impressed with myself because this project was completely out of my comfort zone. My image is symmetrical, proportional, full of different shapes, and has two different gradients to represent the sky and fur, which clearly resembles a cat.

   

Inspiration:

Sketch:

Code: 

////Background

 var startx = 0;

 var starty = 0;

 var width = 800;

 var height = 600;

context.beginPath();

context.rect(startx, starty, canvas.width, canvas.height);

  var grd = context.createLinearGradient(0, 600, 800, 0);

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

  grd. addColorStop(.5, 'rgba(169,167,181,1.00)');

  grd.addColorStop(1, 'rgba(124,130,138,1.00)');

  context.fillStyle = grd;

 //context.fillStyle = 'rgb(255,0,0)';

  context.fill();

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

 context.lineWidth = 20;

context.stroke();

//moon

 var centerX = 670;

        var centerY = 130;

        var radius = 100;

        var startangle = 0;

        var endangle = 2 * Math.PI;

        context.beginPath();

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

    

        context.lineWidth = 5;

        context.strokeStyle = "black";

        context.stroke();

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

context.fill();

//moon

 var centerX = 630;

        var centerY = 110;

        var radius = 20;

        var startangle = 0;

        var endangle = 2 * Math.PI;

        context.beginPath();

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

    

        context.lineWidth = 5;

        context.strokeStyle = "black";

        context.stroke();

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

context.fill();

//moon

 var centerX = 700;

        var centerY = 150;

        var radius = 10;

        var startangle = 0;

        var endangle = 2 * Math.PI;

        context.beginPath();

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

    

        context.lineWidth = 5;

        context.strokeStyle = "black";

        context.stroke();

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

context.fill();

//moon

 var centerX = 720;

        var centerY = 100;

        var radius = 15;

        var startangle = 0;

        var endangle = 2 * Math.PI;

        context.beginPath();

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

    

        context.lineWidth = 5;

        context.strokeStyle = "black";

        context.stroke();

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

context.fill();

//moon

 var centerX = 630;

        var centerY = 180;

        var radius = 15;

        var startangle = 0;

        var endangle = 2 * Math.PI;

        context.beginPath();

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

    

        context.lineWidth = 5;

        context.strokeStyle = "black";

        context.stroke();

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

context.fill();

//little circle

 var centerX = 300;

        var centerY = 200;

        var radius = 100;

        var startangle = 0;

        var endangle = 2 * Math.PI;

        context.beginPath();

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

    

        context.lineWidth = 5;

        context.strokeStyle = "black";

        context.stroke();

 //circle

 var centerX = 450;

        var centerY = 400;

        var radius = 150;

        var startangle = 0;

        var endangle = 2 * Math.PI;

        context.beginPath();

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

    

        context.lineWidth = 5;

        context.strokeStyle = "black";

        context.stroke();

//left TRIANGLE

context.beginPath(); // begin a shape

 

context.moveTo(150,100); // point A coordinates

context.lineTo(250, 120); // point B coords

context.lineTo(210,200); // point C coords

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

context.fill();

context.closePath(); // close the shape

context.lineWidth = 5; // you can use a variable that changes wherever you see a number

context.lineJoin = "round";

context.strokeStyle = "rgba(210,180,140,1.00)"; // Reb Green Blue Alpha

context.stroke();

//right TRIANGLE

context.beginPath(); // begin a shape

 

context.moveTo(425,70); // point A coordinates

context.lineTo(350, 120); // point B coords

context.lineTo(400,200); // point C coords

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

context.fill();

context.closePath(); // close the shape

context.lineWidth = 5; // you can use a variable that changes wherever you see a number

context.lineJoin = "round";

context.strokeStyle = "rgba(210,180,140,1.00)"; // Reb Green Blue Alpha

context.stroke();

//right eye pupil

var centerX = 250;

        var centerY = 200;

        var radius = 10;

        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 = "green";

        context.fill();

//left eye pupil

var centerX = 350;

        var centerY = 200;

        var radius = 10;

        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 = "green";

        context.fill();

//nose 

context.beginPath(); // begin a shape

 

context.moveTo(275,250); // point A coordinates

context.lineTo(300, 200); // point B coords

context.lineTo(325,250); // point C coords

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

context.fill();

context.closePath(); // close the shape

context.lineWidth = 5; // you can use a variable that changes wherever you see a number

context.lineJoin = "round";

context.strokeStyle = "rgba(210,180,140,1.00)"; // Reb Green Blue Alpha

context.stroke();

 //little circle

 var centerX = 250;

        var centerY = 200;

        var radius = 20;

        var startangle = 0;

        var endangle = 2 * Math.PI;

        context.beginPath();

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

    

        context.lineWidth = 5;

        context.strokeStyle = "black";

        context.stroke();

//left whisker 1

var centerX =200;

var centerY = 270;

var radius = 60;

var startangle = 1.80* Math.PI;;

var endangle = 1.25* Math.PI;

context.beginPath();

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

context.lineWidth = 3;

context.strokeStyle = "black"

context.stroke();

context.fillStyle = 'rgba(187,40,42,1.00)';

 

//left whisker 2

var centerX =200;

var centerY = 290;

var radius = 60;

var startangle = 1.80* Math.PI;;

var endangle = 1.25* Math.PI;

context.beginPath();

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

context.lineWidth = 3;

context.strokeStyle = "black"

context.stroke();

context.fillStyle = 'rgba(187,40,42,1.00)';

  

//left whisker 3

var centerX =200;

var centerY = 310;

var radius = 60;

var startangle = 1.80* Math.PI;;

var endangle = 1.25* Math.PI;

context.beginPath();

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

context.lineWidth = 3;

context.strokeStyle = "black"

context.stroke();

context.fillStyle = 'rgba(187,40,42,1.00)';

 //right whisker 1

var centerX =400;

var centerY = 270;

var radius = 60;

var startangle = 1.80* Math.PI;;

var endangle = 1.25* Math.PI;

context.beginPath();

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

context.lineWidth = 3;

context.strokeStyle = "black"

context.stroke();

//right whisker 2

var centerX =400;

var centerY = 290;

var radius = 60;

var startangle = 1.80* Math.PI;;

var endangle = 1.25* Math.PI;

context.beginPath();

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

context.lineWidth = 3;

context.strokeStyle = "black"

context.stroke();

 //right whisker 3

var centerX =400;

var centerY = 310;

var radius = 60;

var startangle = 1.80* Math.PI;;

var endangle = 1.25* Math.PI;

context.beginPath();

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

context.lineWidth = 3;

context.strokeStyle = "black"

context.stroke();

//tan circle 1

 var centerX = canvas.width/1.5;

        var centerY = canvas.height / 1.5;

        var radius = 50;

        var startangle = 0;

        var endangle = 2 * Math.PI;

        context.beginPath();

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

    

        context.lineWidth = 5;

        context.fillStyle = "tan";

        context.fill();

context.strokeStyle = "black"

context.stroke();

//tan circle 2

 var centerX = 400;

        var centerY =  300;

        var radius = 25;

        var startangle = 0;

        var endangle = 2 * Math.PI;

        context.beginPath();

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

    

        context.lineWidth = 5;

        context.fillStyle = "tan";

        context.fill();

context.strokeStyle = "black"

context.stroke();

//black circle 

 var centerX = 375;

        var centerY =  350;

        var radius = 30;

        var startangle = 0;

        var endangle = 2 * Math.PI;

        context.beginPath();

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

    

        context.lineWidth = 5;

        context.fillStyle = "black";

        context.fill();

context.strokeStyle = "black"

context.stroke();

 

//tan circle 3

 var centerX = 395;

        var centerY =  400;

        var radius = 40;

        var startangle = 0;

        var endangle = 2 * Math.PI;

        context.beginPath();

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

    

        context.lineWidth = 5;

        context.fillStyle = "tan";

        context.fill();

context.strokeStyle = "black"

context.stroke();

 

//tan circle 3

 var centerX = 420;

        var centerY =  460;

        var radius = 30;

        var startangle = 0;

        var endangle = 2 * Math.PI;

        context.beginPath();

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

    

        context.lineWidth = 5;

        context.fillStyle = "tan";

        context.fill();

context.strokeStyle = "black"

context.stroke();

 

//black circle 2

 var centerX = 520;

        var centerY =  450;

        var radius = 40;

        var startangle = 0;

        var endangle = 2 * Math.PI;

        context.beginPath();

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

    

        context.lineWidth = 5;

        context.fillStyle = "black";

        context.fill();

context.strokeStyle = "black"

context.stroke();

//black circle 

 var centerX = 375;

        var centerY =  350;

        var radius = 30;

        var startangle = 0;

        var endangle = 2 * Math.PI;

        context.beginPath();

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

    

        context.lineWidth = 5;

        context.fillStyle = "black";

        context.fill();

context.strokeStyle = "black"

context.stroke();

 

//paw 1

 var centerX = canvas.width / 1.5;

        var centerY = canvas.height / 1.1;

        var radius = 40;

        var startangle = 0;

        var endangle = 2 * Math.PI;

        context.beginPath();

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

    

        context.lineWidth = 5;

        context.strokeStyle = "tan";

        context.stroke();

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

context.fill();

 //paw 2

 var centerX = 300;

        var centerY = canvas.height / 1.1;

        var radius = 40;

        var startangle = 0;

        var endangle = 2 * Math.PI;

        context.beginPath();

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

    

        context.lineWidth = 5;

        context.strokeStyle = "tan";

        context.stroke();

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

context.fill();

//Rectangle

var x=300;

var y=375;

var width = 20

var height= 160;

context.beginPath();

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

context.lineWidth = 10;

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

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

// add linear gradient

        var grd = context.createLinearGradient(x, y, x+width, y+height);

        // starting color

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

        //intermediate color

        grd.addColorStop(0.5, "rgba(210,180,140,1.00)");

        // ending color

        grd.addColorStop(1, "rgb(0,0,0)");

        context.fillStyle = grd;

        context.fill();

context.fill();

context.stroke();

//bezier curve 1

// starting point coordinates

var Ax = 550;

var Ay = 300;

// control point 1 coordinates ( magnet )

var cpointX1 = 667;

var cpointY1 = 434;

// control point 2 coordinates ( magnet )

var cpointX2 = 667;

var cpointY2 = 278; 

// control point 3 coordinates ( magnet )

var cpointX3 = 667;

var cpointY3 = 228; 

// control point 4 coordinates ( magnet )

var cpointX4 = 667;

var cpointY4 = 366; 

// ending point coordinates 

var Bx = 750;

var By = 550;

context.beginPath();

context.moveTo(Ax, Ay);

context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, Bx, By);

context.bezierCurveTo(cpointX3, cpointY3, cpointX4, cpointY4, Ax, Ay);

context.fillStyle   = 'rgba(210,180,140,1.00)';

context.fill();

context.closePath();

context.lineWidth = 7;

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

context.lineCap = 'round' 

context.stroke();