Simple Reactive JavaScript sliders and drawing on Canvas

For one planned future project I need to create reactive sliders. When user moves any of the sliders (in this example I have six of them) Canvas drawing is updated on any change.

Simple solution is to attach one function, let's call it onSliderChange to every slider and call this function on input like this:

var slider_ax = document.getElementById('ax');
slider_ax.addEventListener('input', onSliderChange);

-- slider_ax is variable for first slider
-- ax is id of slider input html element
-- onSliderChange is the name of the function

Every slider gets this function.

Now function onSliderChange will first clear the Canvas and then call makeTriangle function. In this example, makeTriangle consist of 3 drawLine functions for every line in the triangle. This shape is used only for presentation purposes, but it can be really anything.

Here is how it looks.

note: Sliders values can change with keyboard also, using tab and left and right arrow and shift tab to go up.

 <!DOCTYPE html>  
     <meta charset="utf-8">  
     <title>Sliders example</title>  
         <link rel="stylesheet" type="text/css" href="styles.css">  
   <div id="menu" style="width:160px;float:left;">  
     Ax: <input type="range" class="styled-input" id="ax" value="300" min="0" max="600" step="20"><br>  
     Ay: <input type="range" class="styled-input" id="ay" value="20" min="0" max="500" step="20"><br>  
     Bx: <input type="range" class="styled-input" id="bx" value="100" min="0" max="600" step="20"><br>  
     By: <input type="range" class="styled-input" id="by" value="50" min="0" max="500" step="20"><br>  
     Cx: <input type="range" class="styled-input" id="cx" value="400" min="0" max="600" step="20"><br>  
         Cy: <input type="range" class="styled-input" id="cy" value="500" min="0" max="500" step="20"><br>  
   <div id="content" style="background-color:#EEEEEE;float:left;">  
   <canvas id="myCanvas" width="600" height="500" style="border:1px solid #d3d3d3;">  
   Your browser does not support the HTML5 canvas tag.</canvas>  
     <script src="app.js"></script>  

 p {  
     font-family:'Lucida Grande',Tahoma,Verdana,Arial,Sans-serif;   
 .styled-input {   
     -webkit-box-shadow:rgba(0,0,0,0.98) 0 1px 0 0;   
     -moz-box-shadow:rgba(0,0,0,0.98) 0 1px 0 0;   
     box-shadow:rgba(0,0,0,0.98) 0 1px 0 0;   
     border:1px solid #999;   
     font-family:'Lucida Grande',Tahoma,Verdana,Arial,Sans-serif;   
     padding:1px 3px;   

 "use strict";  
 var currCanvas = "myCanvas";  
 var slider_ax = document.getElementById('ax');  
 slider_ax.addEventListener('input', onSliderChange);  
 var slider_ay = document.getElementById('ay');  
 slider_ay.addEventListener('input', onSliderChange);  
 var slider_bx = document.getElementById('bx');  
 slider_bx.addEventListener('input', onSliderChange);  
 var slider_by = document.getElementById('by');  
 slider_by.addEventListener('input', onSliderChange);  
 var slider_cx = document.getElementById('cx');  
 slider_cx.addEventListener('input', onSliderChange);  
 var slider_cy = document.getElementById('cy');  
 slider_cy.addEventListener('input', onSliderChange);  
 function drawLine(x1, y1, x2, y2, ccanvas) {  
   var ctx = document.getElementById(ccanvas).getContext("2d");  
   ctx.moveTo(x1, y1);  
   ctx.lineTo(x2, y2);    
   ctx.lineWidth = 3;  
   ctx.strokeStyle = 'black';  
 function makeTriangle(ax, ay, bx, by, cx, cy, ccanvas) {  
     drawLine(ax, ay, bx, by, ccanvas);  
     drawLine(bx, by, cx, cy, ccanvas);  
     drawLine(cx, cy, ax, ay, ccanvas);  
 function onSliderChange() {  
     // update canvas on any slider change  
   var c = document.getElementById("myCanvas"),  
   ctx = c.getContext("2d");  
     ctx.clearRect(0, 0, 600, 500);      
     makeTriangle(slider_ax.value, slider_ay.value, slider_bx.value, slider_by.value, slider_cx.value, slider_cy.value, currCanvas);  
 makeTriangle(slider_ax.value, slider_ay.value, slider_bx.value, slider_by.value, slider_cx.value, slider_cy.value, currCanvas);  


Post a Comment