CODEWITHSUNDEEP
javascripthtmlcanvas
James C.
James C.

Reputation: 61

using canvas to draw rectangle within rectangle?

I have to use canvas and output rectangles within rectangles (number of rectangles depends on how many I have put in the code) and the rectangles should fit nicely inside the previous one. I'm really lost as to how to center the rectangles and have them fit inside the previous rectangle. I know why my output is the way it is, but I'm not sure where to go from here. This is what I have, any help will be greatly appreciated! 

<!DOCTYPE HTML>
<html>
    <head>
        <script>
            window.onload = function(){
                var canvas = document.getElementById("myCanvas");
            	var c = canvas.getContext("2d");  //create HTML5 context object to enable draw methods
				drawNestedRectangles(c, 200, 100, 6, 500, 400, "red");
			
            };		
			
				

				
function drawNestedRectangles(context, whereX, whereY, howMany, width, height, color){	
			
		context.beginPath();
		context.rect(whereX, whereY, width, height);
		context.fillStyle = "white";
		context.fill();
		
		context.lineWidth = 4;
		context.strokeStyle = color; 
		context.stroke();
		for(var i=0; i<howMany - 1; i++) {
			whereX = whereX - 5;
			whereY = whereY - 5;
			width = width - 5;
			height = height - 5;
			context.beginPath();
			context.rect(whereX, whereY, width, height);
			context.fill();
			context.lineWidth = 4;
			context.strokeStyle = color;
			context.stroke();
		}
								
			
			
}
</script>
    </head>
    <body>
        <canvas id="myCanvas" width="800" height="600">
        Your browser doesn't support the HTML5 canvas tag 
        	
        </canvas>
    </body>
</html>

Upvotes: 1

Views: 2205

Answers (2)

Spencer Wieczorek
Spencer Wieczorek

Reputation: 21575

You need to simply move the rectangle's in (add x and y values) and change the width and height accordingly like so (basically subtract it by 5 more to fit it inside the last one):

whereX = whereX + 5; 
whereY = whereY + 5;
width = width - 10; 
height = height - 10; 


<!DOCTYPE HTML>
<html>
    <head>
        <script>
            window.onload = function(){
                var canvas = document.getElementById("myCanvas");
            	var c = canvas.getContext("2d");  //create HTML5 context object to enable draw methods
				drawNestedRectangles(c, 200, 100, 6, 500, 400, "red");
			
            };		
			
				

				
function drawNestedRectangles(context, whereX, whereY, howMany, width, height, color){	
			

		context.beginPath();
		context.rect(whereX, whereY, width, height);
		context.fillStyle = "white";
		context.fill();
		
		context.lineWidth = 4;
		context.strokeStyle = color; 
		context.stroke();
		for(var i=0; i<howMany - 1; i++) {
			whereX = whereX + 5;
			whereY = whereY + 5;
			width = width - 10;
			height = height - 10;
			context.beginPath();
			context.rect(whereX, whereY, width, height);
			context.fill();
			context.lineWidth = 4;
			context.strokeStyle = color;
			context.stroke();
		}
        context.fillStyle = color;
        context.fillText("Hello", whereX + (width/2) , 
whereY + (height/2));
								
			
			
}
</script>
    </head>
    <body>
        <canvas id="myCanvas" width="800" height="600">
        Your browser doesn't support the HTML5 canvas tag 
        	
        </canvas>
    </body>
</html>

Upvotes: 1

Nabil Kadimi
Nabil Kadimi

Reputation: 10424

I would replace this part of the code

for(var i=0; i<howMany - 1; i++) {
    whereX = whereX - 5;
    whereY = whereY - 5;
    width = width - 5;
    height = height - 5;

With:

for (var i = 0; i < howMany - 1; i++) {
    whereX = whereX + context.lineWidth*2;
    whereY = whereY + context.lineWidth*2;
    width = width - context.lineWidth*4;
    height = height - context.lineWidth*4;

Now each square start 2 border widths after the previous one and ends 2 border widths before; both verticaly and horizontaly.

Upvotes: 0

Related Questions