apiKey

authDomain

databaseURL

projectId

storageBucket

messagingSenderId

appId

Learn about the full potential of the Run JS widget by studying the use-cases mentioned here.

Run JS Use-cases

# Drawing Canvas
A simple drawing canvas has been created below. Play around with it to understand all its features.

canvas {
  border: 1px solid black;
}

.colors {
  margin: 10px 15px;
}

.color {
  margin: 10px 0px;
  background: none;
  color: inherit;
  border: none;
  border-radius: 4px;
  padding: 10px; 
  font: inherit;
  outline: inherit; 
  cursor: pointer;
  background-color: attr(data-color);
  transition: all 0.09s ease-in;
}

.color:hover {
	transform: scale(1.1);
}

.black {
  background-color: rgb(0,0,0);
}

.red {
  background-color: rgb(255,0,0);
}

.green {
  background-color: rgb(0,255,0);
}

.blue {
  background-color: rgb(0,0,255);
}

.selected {
  transform: scale(1.3);
  margin: 10px 5px;
  pointer-events: none;
}

<html>
 <head>
   <meta charset="utf-8"/>
   <title>Drawing App: Adding Colors</title>
 </head>
 <body>
   <canvas></canvas>
   <div class="colors">
     <button data-color="rgb(0,0,0)" class="black color selected"></button>
     <button data-color="rgb(255,0,0)" class="red color"></button>
     <button data-color="rgb(0,255,0)" class="green color"></button>
     <button data-color="rgb(0,0,255)" class="blue color"></button>
   </div>
   <button id="clear">Clear Canvas</button>
 </body>
</html>

var canvas = document.querySelector('canvas'); // get canvas element
canvas.width  = 800;
canvas.height = 400;
const context = canvas.getContext('2d'); 

const colors = document.querySelectorAll('.color');
colors.forEach(color => {
  color.addEventListener('click', function(e) {
    // change selected element
    const selected = document.querySelector('.selected');
    selected.classList.remove('selected');
    this.classList.add('selected');
    
    // change context's stroke style
    context.strokeStyle = this.dataset.color;
    context.fillStyle = this.dataset.color;
  });
});

codemirror

- The **Layout** has been set to **Show Output below**. This can be changed according to your preference.

- The CSS tab has been disabled in the **Panels State** option. Clicking on the **CSS** tab will display the code contained in it.




Run JS allows you to make interactive applications.

__default

Creating Interactive Coding Playgrounds and Exercises

Drawing Canvas