Canvas Project

    I chose to portray a landscape for my canvas project using code in Adobe Dreamweaver. The landscape consists of a mountainous backdrop with rolling hills, a small cabin, and a sunset yellow-orange sky that complements the purple snowcapped mountains. The colors of the hills and mountains get lighter in the distance to convey depth. I strived for a balanced composition with an emphasis on value and contrast. I was inspired by Bob Ross's landscape paintings and modern flat art. I did not have an initial sketch; I just formed the shapes and adjusted their positions as I went. This project took approximately six hours to complete.

    My piece is successful because it displays the art elements and principles I wanted to incorporate through vibrant and complementary colors and the balance of shapes. I also included at least ten of the various required shapes. The style of modern flat art and elements of Bob Ross's landscapes coalesce into a simple, yet eye-catching piece that pops.

Code:

// the radial gradient requires a shape, in this case a rectangle that fills the entire canvas

context.rect(0,0, canvas.width, canvas.height);

// inner circle

var circ1X = 388;

var circ1Y = 195;

var circ1Radius = 100;

// outer circle

var circ2X =388;

var circ2Y = 195;

var circ2Radius = 200;

// create radial gradient

var grd = context.createRadialGradient(circ1X, circ1Y, circ1Radius, circ2X, circ2Y, circ2Radius);

// inner color

grd.addColorStop(0, "rgba(255,246,188,1.00)");

// you can add intermediate colors using N greater than 0 and smaller then 1

var N = 0.5;

grd.addColorStop(N, "rgba(255,227,109,1.00)");

// outer color

grd.addColorStop(1, "rgba(255,188,64,1.00)");

context.fillStyle = grd;

context.fill();

//sun

 

  var centerX = canvas.width / 1.55;

        var centerY = canvas.height / 4.2;

        var radius = 35;

        var startangle = 0;

        var endangle = 2 * Math.PI;

        context.beginPath();

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

    

        context.lineWidth = 25;

        context.strokeStyle = "rgba(255,244,202,0.27)"

        context.stroke();

context.fillStyle = "rgba(255,255,255,0.75)"

context.fill();

 

//far mountain

context.beginPath(); // begin a shape

 

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

context.lineTo(40, 500); // point B coords

context.lineTo(600,600); // point C coords

context.closePath(); // close the shape

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

context.lineJoin = "round";

context.fillStyle = "rgba(179,121,255,1.00)";

context.fill();

//far mountain snow

context.beginPath(); // begin a shape

 

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

context.lineTo(225,175); // point B coords

context.lineTo(310,145); // point C coords

context.closePath(); // close the shape

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

context.lineJoin = "round";

context.strokeStyle = "rgba(255,255,255,0.78)"; // Reb Green Blue Alpha

context.stroke();

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

context.fill();

context.beginPath(); // begin a shape

 

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

context.lineTo(280,145); // point B coords

context.lineTo(327,170); // point C coords

context.closePath(); // close the shape

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

context.lineJoin = "round";

context.strokeStyle = "rgba(255,255,255,0.78)"; // Reb Green Blue Alpha

context.stroke();

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

context.fill();

//middle mountain

context.beginPath(); // begin a shape

 

context.moveTo(450,175); // point A coordinates

context.lineTo(100, 700); // point B coords

context.lineTo(700,650); // point C coords

context.closePath(); // close the shape

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

context.lineJoin = "round";

context.fillStyle = "rgba(150,70,255,1.00)";

context.fill();

//middle mountain snow

context.beginPath(); // begin a shape

 

context.moveTo(450,175); // point A coordinates

context.lineTo(512,290); // point B coords

context.lineTo(406,240); // point C coords

context.closePath(); // close the shape

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

context.lineJoin = "round";

context.strokeStyle = "rgba(255,255,255,0.78)"; // Reb Green Blue Alpha

context.stroke();

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

context.fill();

context.beginPath(); // begin a shape

 

context.moveTo(450,175); // point A coordinates

context.lineTo(468,230); // point B coords

context.lineTo(373,290); // point C coords

context.closePath(); // close the shape

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

context.lineJoin = "round";

context.strokeStyle = "rgba(255,255,255,0.78)"; // Reb Green Blue Alpha

context.stroke();

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

context.fill();

// close mountain

context.beginPath(); // begin a shape

 

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

context.lineTo(-80, 600); // point B coords

context.lineTo(450,700); // point C coords

context.closePath(); // close the shape

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

context.lineJoin = "round";

context.fillStyle = "rgba(134,45,253,0.99)";

context.fill();

//close mountain snow

context.beginPath(); // begin a shape

 

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

context.lineTo(75,330); // point B coords

context.lineTo(195,275); // point C coords

context.closePath(); // close the shape

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

context.lineJoin = "round";

context.strokeStyle = "rgba(255,255,255,0.78)"; // Reb Green Blue Alpha

context.stroke();

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

context.fill();

context.beginPath(); // begin a shape

 

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

context.lineTo(150,275); // point B coords

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

context.closePath(); // close the shape

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

context.lineJoin = "round";

context.strokeStyle = "rgba(255,255,255,0.78)"; // Reb Green Blue Alpha

context.stroke();

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

context.fill();

/// top hill bezier curve

// starting point coordinates

var x = 0;

var y = 575;

// control point 1 coordinates ( magnet )

var cpointX1 = canvas.width / 1.45;

var cpointY1 = canvas.height / 1.30 + 200;

// control point 2 coordinates ( magnet )

var cpointX2 = canvas.width / 1.5;

var cpointY2 = canvas.height / 2 - 200; 

// ending point coordinates 

var x1 = 800;

var y1 = 850;

context.beginPath();

context.moveTo(x, y);

context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, x1, y1);

context.lineWidth = 175;

context.strokeStyle = "rgba(111,216,55,1.00)";

context.lineCap = 'round' 

context.stroke();

/// middle hill quadratic curve

// starting point coordinates

var x = 0;

var y = 700;

// control point coordinates ( magnet )

var cpointX = canvas.width / 1.75 - 80;

var cpointY = canvas.height / 1.5 - 150;

// ending point coordinates

var x1 = 850;

var y1 = 1100;

context.beginPath();

context.moveTo(x, y);

context.quadraticCurveTo(cpointX, cpointY, x1, y1);

context.lineWidth = 165;

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

context.stroke();

// house base

context.beginPath();

context.rect(-10,600,195,800); // x,y,w,h

context.closePath();

context.fillStyle = "rgba(255,0,0,0.5)";

context.fill();

//house door

context.beginPath();

context.rect(58,650,58,650); // x,y,w,h

context.closePath();

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

context.fill();

//house roof

context.beginPath(); // begin a shape

 

context.moveTo(87,520); // point A coordinates

context.lineTo(-10,600); // point B coords

context.lineTo(195,600); // point C coords

context.closePath(); // close the shape

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

context.lineJoin = "butt";

context.fillStyle = "rgba(128,75,1,1.00)";

context.fill();

//house roof line

var x= -10;

var y = 600;

var x1 = 87;

var y1 = 520;

var x2 = 195;

var y2 = 600

context.beginPath();

context.moveTo(x, y);

context.lineTo(x1, y1); // move to starting coordinates

context.lineTo(x2, y2); // draw line to following point

context.lineCap = 'butt';

context.lineWidth = 15;// declare the width in pixels of the line

context.strokeStyle = 'rgba(78,46,0,1.00)'; // or "#FF0000" // declare the line color in rgb or hexadecimal values

context.stroke();

/// bottom hill bezier curve

 

// starting point coordinates

var x = -10;

var y = 800;

// control point 1 coordinates ( magnet )

var cpointX1 = canvas.width / 2;

var cpointY1 = canvas.height / 2 + 500;

// control point 2 coordinates ( magnet )

var cpointX2 = canvas.width / 1.5;

var cpointY2 = canvas.height / 2 - 80; 

// ending point coordinates 

var x1 = 900;

var y1 = 1185;

context.beginPath();

context.moveTo(x, y);

context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, x1, y1);

context.lineWidth = 200;

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

context.lineCap = 'round' 

context.stroke();

//window

var centerX = canvas.width / 6.8;

        var centerY = canvas.height /1.35;

        var radius = 18;

        var startangle = 0;

        var endangle = 2 * Math.PI;

        context.beginPath();

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

    

        context.lineWidth = 2;

        context.strokeStyle = "rgba(78,46,0,1.00)"

        context.stroke();

context.fillStyle = "rgba(255,207,43,1.00)"

context.fill();

//window line 1

context.moveTo(70,592.5); // COORDINATES OF STARTING POINT

context.lineTo(105,592.5); // COORDS OF ENDING POINT 1

context.lineWidth = 5; // STROKE WIDTH

context.stroke(); // STROKE

//window line 2

context.moveTo(88.5,578); // COORDINATES OF STARTING POINT

context.lineTo(88.5,610); // COORDS OF ENDING POINT 1

context.lineWidth = 5; // STROKE WIDTH

context.stroke(); // STROKE