Canvas inside forEach

Question

Canvas inside forEach

Navigation

#1 by (4 votes)

1

I need to draw a canvas for each element of the matrix, but I do not draw anything with the foreach, but if I take out the foreach and the function per and I only leave the drawing of #nodes if it works, but clearly it only draws me once.

 b = [1,2,3,4,5];
    
    $(document).ready(function(){
    		
    	function per() {
    		console.log("per()");
    		 $('#nodes').css({
                'border-radius': '5px',
                'padding': '0',
                'margin': '0',
                'width': '200px',
                'height': '200px',
                'position': 'absolute',
                'right': '15px',
                'bottom': '15px'
    	
            });
    		
    	}
    
    	$('body').append('<canvas id="minimap"></canvas><canvas id="nodes"></canvas>');
    
            $('#minimap').css({
                'background': 'rgba(1,1,1,0.7',
                'border-radius': '0px',
                'border': '1px solid rgba(255,255,255,0.2)',
                'padding': '0',
                'margin': '0',
                'width': '200px',
                'height': '200px',
                'position': 'absolute',
                'right': '15px',
                'bottom': '15px'
            });
    	   b.forEach(per);
            
    		
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

New problem: the answer of asier serves me, the problem is that then I have a function outside of all this code that makes a document.getElementById, I tried doing document.getElementById ($ canvas); but it did not work for me, what should I do?

function per () { for (var i = 0; b [i]; i ++) { var $ canvas = $ (""). css ({ // BLA bla }

}

javascript jquery canvas

asked by Eduardo Sebastian 04.05.2017 в 13:05

source

1 answer

Error comparing values in Android (if) This alias does not work, apparently well written

score 4 · Accepted Answer

You have several problems in your code.

The per function does not create any objects, simply change the style of the existing nodes object.

Both the canvas minimap and the nodes are creating it in the statement $('body').append

Afterwards the function per itself is executed 5 times but the only thing it does is change 5 times the style of the canvas per (which, since it does not have a background color, can not be seen).

The per function should create the canvas object and add it to the DOM.

Look at the following example. In the function per I create a new canvas object and add it to the body. I have put blue background color so that the canvases can be seen and I have removed the absolute positioning so that they do not stand on top of each other (so that the 5 can be seen).

The function per receives as a parameter the element of the array b that it uses to give a different id to each canvas.

b = [1,2,3,4,5];
    
    $(document).ready(function(){
    		
    	function per(id) {
    		console.log(id);
    		 var $canvas = $('<canvas id="nodes' + id + '"></canvas>').css({
                'border-radius': '5px',
                'padding': '0',
                'margin': '0',
                'width': '200px',
                'height': '200px',
                //'position': 'absolute',
                'right': '15px',
                'bottom': '15px',
                'background-color': 'blue'
            });
          $('body').append($canvas);
    		
    	}
    
    	$('body').append('<canvas id="minimap"></canvas>');
    
            $('#minimap').css({
                'background': 'rgba(1,1,1,0.7',
                'border-radius': '0px',
                'border': '1px solid rgba(255,255,255,0.2)',
                'padding': '0',
                'margin': '0',
                'width': '200px',
                'height': '200px',
                'position': 'absolute',
                'right': '15px',
                'bottom': '15px'
            });
    	   b.forEach(per);
            
    		
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>