Canvas

Canvasmarkdown

gOPZwBj
-------


A [Pen](https://codepen.io/rshstone/pen/gOPZwBj) by [Justin](https://codepen.io/rshstone) on [CodePen](https://codepen.io).

[License](https://codepen.io/rshstone/pen/gOPZwBj/license).

index.html

<h1>Qishaoqing</h1>
<canvas id = "d1" >
</canvas>
<canvas id = "d2" >
</canvas>
<p>
  <input type = "button" value = "make green" onclick = "doGreen()">
   <input type = "button" value = "make yellow" onclick = "doYellow()">
</p>

script.js

function doGreen(){
  var dd1 = document.getElementById("d1");
  dd1.style.backgroundColor = "green";
  var context = dd1.getContext("2d");
  context.fillStyle = "yellow";
  context.fillRect(10,10,60,60);
  context.fillRect(80,10,60,60);
  
  context.fillStyle = "black";
  context.font = "20px Arial";
  context.fillText("Hello",15,45);
}
function doYellow(){
  var dd2 = document.getElementById("d2");
  dd2.style.backgroundColor = "yellow";
}

style.css

.greenback{
  background-color: green;
}
canvas{
  width:200pt;
  height:100pt;
  margin:10px;
  border: 1px solid lightgray;
}

Canvas