canvas

More about drawing on Canvas using HTML sliders and JavaScript

flanture
by flanture 2:29 PM


In previous post Simple reactive JavaScript sliders you could see how to attach listener to HTML sliders and how to use JavaScript to draw on Canvas. By moving the sliders shape is changing dynamically. This is very basic example.

One slightly complicated example is to generate circles on random positions. Below is the code.

Drawing on Canvas using HTML sliders and JavaScript

Function Circle has 3 parameters, x is x position of the circle, y is y position of the circle on Canvas and z is radius, current Radius slider value. Both x and y are randomly chosen using Math.random JavaScript function.

How this works? Every time slider changes position onSliderChange function is called and if user moves slider to the right Circle object is generated and pushed to array. Then all circles are drawn on Canvas using drawCircles function. If user moves slider to the left elements from array are deleted using pop() function. Simple. 

Code is separated into functions in a way that it is very easy to instead of drawCircles one can write drawRectangle or drawAnyShape etc. 

This opens up possibility to write wide range of generators like background generators or some digital art etc. 

Styles.css file is the same as in previous tutorial so I'll skip that.

Here are other two files.

index.html

 <!DOCTYPE html>  
 <html>  
   
   <head>  
     <meta charset="utf-8">  
     <title>Circles example</title>  
         <link rel="stylesheet" type="text/css" href="styles.css">  
   </head>  
   <body>  
   <div id="menu" style="width:160px;float:left;">  
   <p>  
     Circles: <input type="range" class="styled-input" id="_cir" value="0" min="0" max="20" step="1"><br>  
     Radius: <input type="range" class="styled-input" id="_rad" value="20" min="20" max="200" step="10"><br>  
         <br>  
   </p>  
   </div>  
   <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>  
   </div>  
     <script src="app.js"></script>  
   </body>  
 </html>

app.js

 "use strict";  
 var currCanvas = "myCanvas";  
   
 var arr = [];  
   
 var slider_cir = document.getElementById('_cir');  
 slider_cir.addEventListener('input', onSliderChange);  
   
 var slider_rad = document.getElementById('_rad');  
 slider_rad.addEventListener('input', onSliderChange);  
   
 function Circle(x, y, z) {  
   this.x = x;  
   this.y = y;  
     this.z = z;  
 }  
   
 function init() {  
     // starting position  
     slider_cir.value = 0;  
     slider_rad.value = 20;  
 }  
   
 function addRandomCircle() {  
     // function adds random circle to arr   
     var p = new Circle(Math.floor(Math.random()*600), Math.floor(Math.random()*500), slider_rad.value);  
     // console.log(p);  
     return p;  
 }  
   
 function drawCircles() {  
   
     var ptn;  
     for (ptn = 0; ptn < arr.length; ptn++) {  
         // draw circles one by one  
         var c = document.getElementById("myCanvas"),  
         ctx = c.getContext("2d");  
         ctx.beginPath();  
         ctx.lineWidth = 3;  
         ctx.strokeStyle = 'black';          
         ctx.arc(arr[ptn].x, arr[ptn].y, arr[ptn].z, 0, 2 * Math.PI);  
         ctx.stroke();  
     }            
 }  
   
 function onSliderChange() {  
       
     // update canvas on any slider change  
   var c = document.getElementById("myCanvas"),  
   ctx = c.getContext("2d");  
     ctx.clearRect(0, 0, 600, 500);      
   
     var l = arr.length;  
       
     if (slider_cir.value > l) {  
         // add new circles  
         var diff = slider_cir.value - l;  
           
         var i;  
         for (i=0; i<diff; i++) {  
             var p = addRandomCircle();  
             arr.push(p);  
         }  
           
     } else if (slider_cir.value < l) {  
                 // remove circles   
                 var diff = l - slider_cir.value;  
                 var i;  
                 for (i=0; i<diff; i++) {  
                     arr.pop();  
                 }  
             }  
     drawCircles();  
       
 }  
   
 init();

*_* - If you like this post, please share it. Thanx.

Post a Comment

0 Comments

Thanks for sharing your thoughts !