Creating Canvas Elements — Week Three

In this example below you will see how to do a Creating Canvas Elements — Week Three with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by stacylove, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright stacylove ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Creating Canvas Elements — Week Three</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <h1>Week Three – Creating Canvas Elements</h1>
<canvas id="d1"></canvas>
<canvas id="d2"></canvas>
<br>
<input type="button" value="Red" onclick="doRed()">
<input type="button" value="Blue" onclick="doBlue()">
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/stacylove/creating-canvas-elements-andx2014-week-three-ddqeoG */
/* Canvas */
canvas {
  width: 200px;
  height: 100px;
  border: 1px solid #000000;
}

/* Selectors */
h1 { 
  font-family : "Calibri"; 
  size : 14pt ;
  color : #008B8B;
}

p { 
  font-family : "Calibri"; 
  color : #696969;
  font-size: 12pt;
  padding-left: 1px;
}

a:active { font-family : "Calibri"; 
      font-size : 12pt; 
		  font-style : normal; 
		  line-height : normal; 
		  font-weight : bold; 
		  color : #FF6347; 
		  text-decoration: none;
}

/* Classes */
.blueBack{
  /* Changes the background color to blue */
  font-style: oblique;
  font-family: "Calibri";
  font-size : 12pt;
  color : #ffffff;
  background-color : #0099cc;
}

.yellowBack{
  /* Changes the background color to yellow */
  font-family: "Calibri";
  background-color : #ffff99;
}

.resetBack{
  /* Resets the background color to white */
  background-color : #ffffff;
}



/*Downloaded from https://www.codeseek.co/stacylove/creating-canvas-elements-andx2014-week-three-ddqeoG */
function doRed() 
{ 
  /*  Change the background color of the left square using a style property */
  var dd1  = document.getElementById("d1");  
  dd1.style.backgroundColor = "red";
  
  var context = dd1.getContext("2d");
  context.fillStyle = "yellow";
  context.fillRect(10,10,40,40);
  context.fillRect(60,10,40,40);
  
  context.fillStyle = "black";
  context.font = "30px Calibri";
  context.fillText("Hello!",10,90);
  
}

function doBlue() 
{ 
  var dd2  = document.getElementById("d2");  
  dd2.style.backgroundColor = "blue";
}

function changeColors() 
{ 
  var dd1  = document.getElementById("d1");
  var dd2  = document.getElementById("d2");
  
  dd1.className = "blueBack"; 
  dd2.className = "yellowBack";
}

function resetColors() 
{ 
  var dd1  = document.getElementById("d1");
  var dd2  = document.getElementById("d2");
  
  dd1.className = "resetBack"; 
  dd2.className = "resetBack";
}

Comments