Inputs and Events

index.html

<canvas id = "d1">
</canvas>
<p>
  <input type = "color" value = ""#61d936" id = "clr" onchange = "doColor()" >
  <input type = "range" min = "10" max = "100" value = "10" id = "cls" oninput = "doSquare()">
</p>
                                                                                             
                                                                            
                                                                            
                                                                            
                                                                            
                                                                            
                                                                            

Inputs and Events.markdown

gOrYEyv

A Pen by Justin Shi on CodePen.

License.

script.js

function changeColor(){
  var dd1 = document.getElementById("d1");
  dd1.style.backgroundColor = "green";
}
function doColor(){
  var dd1 = document.getElementById("d1");
  var colorinput = document.getElementById("clr");
  var color = colorinput.value;
  dd1.style.backgroundColor = color;
}
function doSquare(){
  var dd1 = document.getElementById("d1");
  var sizeinput = document.getElementById("cls");
  var size = sizeinput.value;
  var ctx = dd1.getContext("2d");
ctx.clearRect(0,0,dd1.width,dd1.height);
  ctx.fillStyle = "yellow";
  ctx.fillRect(10,10,size,size);
}

style.css

canvas{
  width:200pt;
  height:100pt;
  margin:10px;
  border: 1px solid lightgray;
}