Canvas_Coding1





Code: 

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> Dream Big </title>

<style type="text/css">
body,td,th {
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
color: #000;
}

</style>
</head>

<body>

<canvas id="myCanvas" width="600" height="600"></canvas>

<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

//BLUE BACKGROUND
      context.beginPath();
      context.rect(0, 0, 600, 600);
      var grd = context.createLinearGradient(300, 0, 300, 500);
      grd.addColorStop(0, "rgb(160,250,300)");   
    
   

      context.fillStyle = grd;
      context.fill();
//CIRCLE 
context.beginPath();
context.arc(400,300,150,0*Math.PI, 2*Math.PI,true);
context.closePath
var grd = context.createLinearGradient(300,-110,300,800);
grd.addColorStop(0,"rgba(255,0,0,.2)"); //STARTING COLOR
grd.addColorStop(.1,"rgba(0,0,0,.6)");
grd.addColorStop(.12,"rgba(255,0,0,.2)");
grd.addColorStop(.13,"rgba(0,0,0,.6)");
grd.addColorStop(.14,"rgba(255,0,0,.2)");
grd.addColorStop(.15,"rgba(0,0,0,.6)");
grd.addColorStop(.16,"rgba(255,0,0,.2)");
grd.addColorStop(.17,"rgba(0,0,0,.6)");
grd.addColorStop(.18,"rgba(255,0,0,.2)");
grd.addColorStop(.19,"rgba(0,0,0,.6)");
grd.addColorStop(.2,"rgba(255,0,0,.2)");
grd.addColorStop(.21,"rgba(0,0,0,.6)");
grd.addColorStop(.22,"rgba(255,0,0,.2)");
grd.addColorStop(.23,"rgba(0,0,0,.6)");
grd.addColorStop(.24,"rgba(255,0,0,.2)");
grd.addColorStop(.25,"rgba(0,0,0,.6)");
grd.addColorStop(.26,"rgba(255,0,0,.2)");
grd.addColorStop(.27,"rgba(0,0,0,.6)");
grd.addColorStop(.28,"rgba(255,0,0,.2)");
grd.addColorStop(.29,"rgba(0,0,0,.6)");
grd.addColorStop(.3,"rgba(255,0,0,.2)");
grd.addColorStop(.31,"rgba(0,0,0,.6)");
grd.addColorStop(.32,"rgba(255,0,0,.2)");
grd.addColorStop(.33,"rgba(0,0,0,.6)");
grd.addColorStop(.34,"rgba(255,0,0,.2)");
grd.addColorStop(.35,"rgba(0,0,0,.6)");
grd.addColorStop(.36,"rgba(255,0,0,.2)");
grd.addColorStop(.37,"rgba(0,0,0,.6)");
grd.addColorStop(.38,"rgba(255,0,0,.2)");
grd.addColorStop(.39,"rgba(0,0,0,.6)");
grd.addColorStop(.4,"rgba(255,0,0,.2)");
grd.addColorStop(.41,"rgba(0,0,0,.6)");
grd.addColorStop(.42,"rgba(255,0,0,.2)");
grd.addColorStop(.43,"rgba(0,0,0,.6)");
grd.addColorStop(.44,"rgba(255,0,0,.2)");
grd.addColorStop(.45,"rgba(0,0,0,.6)");
grd.addColorStop(.46,"rgba(255,0,0,.2)");
grd.addColorStop(.47,"rgba(0,0,0,.6)");
grd.addColorStop(.48,"rgba(255,0,0,.2)");
grd.addColorStop(.49,"rgba(0,0,0,.6)");
grd.addColorStop(.5,"rgba(255,0,0,.2)");
grd.addColorStop(.51,"rgba(0,0,0,.6)");
grd.addColorStop(.52,"rgba(255,0,0,.2)");
grd.addColorStop(.53,"rgba(0,0,0,.6)");
grd.addColorStop(.54,"rgba(255,0,0,.2)");
grd.addColorStop(.55,"rgba(0,0,0,.6)");
grd.addColorStop(.56,"rgba(255,0,0,.2)");
grd.addColorStop(.57,"rgba(0,0,0,.6)");
grd.addColorStop(.58,"rgba(255,0,0,.2)");
grd.addColorStop(.59,"rgba(0,0,0,.6)");
grd.addColorStop(.6,"rgba(255,0,0,.2)");
grd.addColorStop(.61,"rgba(0,0,0,.6)");
grd.addColorStop(.62,"rgba(255,0,0,.2)");
grd.addColorStop(.63,"rgba(0,0,0,.6)");
grd.addColorStop(.64,"rgba(255,0,0,.2)");
grd.addColorStop(.65,"rgba(0,0,0,.6)");
grd.addColorStop(.66,"rgba(255,0,0,.2)");
grd.addColorStop(.67,"rgba(0,0,0,.6)");
grd.addColorStop(.68,"rgba(255,0,0,.2)");
grd.addColorStop(.69,"rgba(0,0,0,.6)");
grd.addColorStop(.7,"rgba(255,0,0,.2)");
grd.addColorStop(.71,"rgba(0,0,0,.6)");
grd.addColorStop(.72,"rgba(255,0,0,.2)");
grd.addColorStop(.73,"rgba(0,0,0,.6)");
grd.addColorStop(.74,"rgba(255,0,0,.2)");
grd.addColorStop(.75,"rgba(0,0,0,.6)");
grd.addColorStop(.76,"rgba(255,0,0,.2)");
grd.addColorStop(.77,"rgba(0,0,0,.6)");
grd.addColorStop(.78,"rgba(255,0,0,.2)");
grd.addColorStop(.79,"rgba(0,0,0,.6)");
grd.addColorStop(.8,"rgba(255,0,0,.2)");
grd.addColorStop(.81,"rgba(0,0,0,.6)");
grd.addColorStop(.82,"rgba(255,0,0,.2)");
grd.addColorStop(.83,"rgba(0,0,0,.6)");
grd.addColorStop(.84,"rgba(255,0,0,.2)");
grd.addColorStop(.85,"rgba(0,0,0,.6)");
grd.addColorStop(.86,"rgba(255,0,0,.2)");
grd.addColorStop(.87,"rgba(0,0,0,.6)");
grd.addColorStop(.88,"rgba(255,0,0,.2)");
grd.addColorStop(.89,"rgba(0,0,0,.6)");
grd.addColorStop(.9,"rgba(255,0,0,.2)");
grd.addColorStop(.91,"rgba(0,0,0,.6)");
grd.addColorStop(.92,"rgba(255,0,0,.2)");
grd.addColorStop(.93,"rgba(0,0,0,.6)");
grd.addColorStop(.94,"rgba(255,0,0,.2)");
grd.addColorStop(.95,"rgba(0,0,0,.6)");
grd.addColorStop(.96,"rgba(255,0,0,.2)");
grd.addColorStop(.97,"rgba(0,0,0,.6)");
grd.addColorStop(.98,"rgba(255,0,0,.2)");
grd.addColorStop(.99,"rgba(0,0,0,.6)");
grd.addColorStop(1,"rgba(255,0,0,.2)");//ENDING COLOR
context.fillStyle = grd;
context.fill();


</script>
</body>
</html>

Comments

Post a Comment

Popular posts from this blog

Thoughts about "The Secrets of Blackmoor"

 When I first started watching the documentary, I thought it would be a quick story on how the game was invented and it was something they randomly came up with. In reality, however, there was more to it than that. I like how Dave Arneson used soldier or war-like figurines (AKA Russian soldier toys) to make a little prototype of the game, and how most of the co-creators use their inspirations on how they were fascinated by caves and creatures into a game about mythical creatures, critical thinking, and problem solving. I also found interesting that it was originally called "Blackmoor" at the start before it became Dungeons and Dragons. 
Read more

Logos and business card

Image
In this project, I had to design my own logo and pick the best one that would fit on my business card, and I chose happy because it was a design that I actually liked and preferred. It was a little hard to render it into a business card but at least I had a general idea. 
Read more