peppa pig canvas

using HTML5 and JS

by Kevin Gyan-Baffour

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <title>Peppa pig</title>
  </head>

  <body>

    <canvas id="myCanvas" width="1260" height="680" style="border:1px solid #d3d3d3;">
      Your browser does not support the HTML5 canvas tag.
    </canvas>

    <!--LINK TO WEBSITE-Bootstrap-->

    <div style="position : absolute; bottom : 0px; left : 0px; margin : 50px; padding : 5px; background-color:#ce3635;">
      <a href="https://pkgyan-baffour.github.io/" style="color: white; text-decoration : none; font-family: 'Lato', sans-serif; text-shadow: 1px 1px 1px black;">Kevin Gyan-Baffour</a>
    </div>

  </body>

</html>

JavaScript

var c = document.getElementById("myCanvas");

//this returns a 2d content,and  getContext() method returns a drawing context onto the canvas
var ctx = c.getContext("2d");

//The createLinearGradient() method was used to create a linear gradient and the used to fill the rectangle (ctx.fillRect)
function myGradients() { //code to be executed

  var my_gradient = ctx.createLinearGradient(2, 10, 10, 300);

  //used the addColorStop method to specify 2 different colors and the positions of the colors in the gradient object.
  my_gradient.addColorStop(1, "#66d9ff");
  my_gradient.addColorStop(0, "#ffff99");
  ctx.fillStyle = my_gradient;
  ctx.fillRect(0, 0, 1260, 680);
}

myGradients(); //calls the function.

//Snippet of code found here..http://jsfiddle.net/razh/sA6Wc/
//sun...
function sunShine() {

  // variable x,y to position the object on the canvas
  var x = 160,
    y = 85,
    // Radii of the yellow glow.
    innerRadius = 1,
    outerRadius = 50, //adds outer color.
    // Radius of the entire circle.
    radius = 60;

  var grd = ctx.createRadialGradient(x, y, innerRadius, x, y, outerRadius);
  grd.addColorStop(0, 'yellow');
  grd.addColorStop(1, '#ffb366');

  //draws the entire circle using the arc() method.
  ctx.arc(x, y, radius, 0, 2 * Math.PI);

  ctx.fillStyle = grd;
  ctx.fill();

};

sunShine(); //calls the function

//created a function to drawLawn and used the rect() method as a base for the drawing.
function drawLawn() {
  ctx.beginPath();
  ctx.rect(0, 450, 1260, 100);
  ctx.fillStyle = "#74c368";
  ctx.fill();

  //in drawing the bakground (green hills) i used the bezierCurveTo method which added points to the paths using control points that represents a cubic bezier curve.
  //then LineTo() to join the end point of the bezierCurve.

  ctx.beginPath();
  ctx.moveTo(1200, 450); // Create a starting point
  ctx.bezierCurveTo(530, -250, 620, 610, 250, 200);
  ctx.lineTo(20, 450); // Create a horizontal line
  ctx.fillStyle = "#74c368";
 ...