Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
  <script>
    var canvas, ctx;
    var width, height;
    var x, y;
    // Move 3 pixels left or right at each frame
    var incX = 3;
    var size = 10;
   
    // Called after the DOM is ready (page loaded)
    function init() {
 
      // init the different variables
      canvas = document.querySelector("#mycanvas");
      ctx = canvas.getContext('2d');
      
      width = canvas.width;
      height = canvas.height;
      
      // default values
      x=10; y = 10;
      ctx.fillStyle='red';
           
      // Restore last state
      initPreferences();
      
      // Start animation
      animationLoop();
    }
    
    function animationLoop() {
      // an animation is : 1) clear canvas and 2) draw shapes, 
      // 3) move shapes, 4) recall the loop with requestAnimationFrame
      
      // clear canvas
      ctx.clearRect(0, 0, width, height);
     
      ctx.fillRect(x, y, size, size);
      ctx.strokeRect(x, y, size, size);
     
      // move rectangle
      x += incX;
      
      // check collision on left or right
      if(((x+5) > width) || (x <= 0)) {
        // cancel move + inverse speed
        x -= incX;
        incX = -incX;
      }
      
      // animate again at 60 frames/s
      requestAnimationFrame(animationLoop);
    }  
    
    function changeSpeed(event) {
      incX = Math.sign(incX)*parseInt(event.target.value);
      document.getElementById("speedValue").innerHTML = Math.abs(incX);
      
    }
    function changeColor(event) {
      ctx.fillStyle = event.target.value;
    }
    function changeSize(event) {
      size =parseInt(event.target.value);
      document.getElementById("sizeValue").innerHTML = size;
    }
    function changeLineWidth(event) {
      ctx.lineWidth = parseInt(event.target.value);
    }
  </script>
</head>
  
<body onload="init();">
  <canvas id="mycanvas" width="200" height="50" style="border: 2px solid black"></canvas>
  <p>
   <label for="size">Size of the rectangle:</label> <input type="range" id="size" min=10 max=40 value=10 oninput="changeSize(event);"><output id="sizeValue">10</output><p>
  <p>
 
    <label for="color">Color:</label> <input id="color" type="color" value='#FF0000' oninput="changeColor(event);">
 
    <p>
    <label for="lineWidth">Line width of outline using <code>&lt;input type=number&gt;</code>:</label> <input type="number" id="lineWidth" value=1 min=1 max=5 oninput="changeLineWidth(event);">
    <p>
     <label for="speed">Speed:</label> <input id="speed" type="range" min=1 max=10 value=3 oninput="changeSpeed(event);"><output id="speedValue">3</output><p>
</body>
</html>
 
​
function initPreferences() {
  console.log("Adding input listener to all input fields");
  // add an input listener to all input fields
  var listOfInputsInForm = document.querySelectorAll("input");
   for(var i= 0; i < listOfInputsInForm.length; i++) {
     addInputListener(listOfInputsInForm[i]);
   }
  
  // restore preferences
  restorePreferences();
  
  applyGUIvalues();
}
​
function addInputListener(inputField) {
  inputField.addEventListener('input', function(event) {
    localStorage.setItem(inputField.id, inputField.value);
  }, false);
}
​
function restorePreferences() {
  console.log("restoring form content from localStorage");
  
  // get the list of all input elements in the form
  var listOfInputsInForm = document.querySelectorAll("input");
  
  // For each input element, 
  //    - get its id (that is also the key for it's saved content 
  //      in the localStorage)
  //    - get the value associated with the id/key in the local
  //      storage
  //    - If the value is not undefined, restore the value
  //      of the input field
  for(var i= 0; i < listOfInputsInForm.length; i++) {
    var fieldToRestore = listOfInputsInForm[i];
    var id = fieldToRestore.id;
    var savedValue = localStorage.getItem(id);
    
    if(savedValue !== undefined) {
      fieldToRestore.value = savedValue;
    }
  }
}
​
function applyGUIvalues() {
  var sizeWidget = document.getElementById("size");
  size = Math.sign(incX)*parseInt(sizeWidget.value);
  document.getElementById("sizeValue").innerHTML = size;
  
  var colorWidget = document.getElementById("color");
  ctx.fillStyle = colorWidget.value;
  
  var speedWidget = document.getElementById("speed");
  incX = Math.sign(incX)*parseInt(speedWidget.value);
  document.getElementById("speedValue").innerHTML = Math.abs(incX);
  
  var lineWidthWidget = document.getElementById("lineWidth");
  ctx.lineWidth = parseInt(lineWidthWidget.value);
}
​
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
micbuffapro
0viewers