CODEWITHSUNDEEP
javascriptjqueryhtmlhtml5-canvas
jack blank
jack blank

Reputation: 5203

2 column grid with canvas

I'm just trying to make a 2 column grid based off an object. I want to put the text in the rectangles eventually. I will show you what I came up with. The main problem is that the recs y positions in the second column are not evenly spaced. The margins don't look right.

$(function(){

 var questions = {
    	question1 : ["This is a question for statement 1 This is a question for statement 1", 7],
    	question2 : ["This is a question for statement 2 This is a question for statement 2", 3],
    	question3 : ["This is a question for statement 3 This is a question for statement 3", 8],
    	question4 : ["This is a question for statement 4 This is a question for statement 4", 8],
    	question5 : ["This is a question for statement 5 This is a question for statement 5", 8],
    	question6 : ["This is a question for statement 6 This is a question for statement 6", 8],
    	question7 : ["This is a question for statement 7 This is a question for statement 7", 8],
    	question8 : ["This is a question for statement 8 This is a question for statement 8", 8]
    
    }
    var canvas = $("canvas")[0];
    var ctx = canvas.getContext("2d");
	
	var count0 = 0;
	var count1 = 1;
    for(var question in questions){
    	var i = Object.keys(questions).indexOf(question);
    	var a = i - 1;
    	
    	ctx.fillStyle = "green";
    	if( i % 2 == 0 && i  == 0){
    		ctx.fillRect(0, (i * 1) * 200, 200, 200)
    	}else if(i % 2 == 0 && i  !== 0){
    		count0++
    	//	console.log("count", count0)
    		ctx.fillRect(0, (i * 1) * 210 - (200 *count0), 200, 200)
    	}else if(i % 2 == 1 && i  == 1){
    		ctx.fillRect(210, 0 * 200, 200, 200)
    	}

    	else if(i % 2 == 1 && i  !== 1){
    		count1++
    	//	console.log("count", count1)
    		ctx.fillRect(210, (i * 1) * 207 - (200 *count1), 200, 200)
    		// ctx.fillRect(210, ())
    	}
		    	
		    	
	}


		})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<canvas id "myCanvas" width = "700px" height = "1000px"></canvas>

Upvotes: 1

Views: 46

Answers (1)

nnnnnn
nnnnnn

Reputation: 150010

I don't have the patience to figure out what exactly is going wrong with your code (although I would guess that multiplying by 210 in one column and 207 in the other is a big part of the problem), because it seems to me that you can get the desired result with much simpler code:

$(function() {
  var questions = {
    question1: ["This is a question for statement 1 This is a question for statement 1", 7],
    question2: ["This is a question for statement 2 This is a question for statement 2", 3],
    question3: ["This is a question for statement 3 This is a question for statement 3", 8],
    question4: ["This is a question for statement 4 This is a question for statement 4", 8],
    question5: ["This is a question for statement 5 This is a question for statement 5", 8],
    question6: ["This is a question for statement 6 This is a question for statement 6", 8],
    question7: ["This is a question for statement 7 This is a question for statement 7", 8],
    question8: ["This is a question for statement 8 This is a question for statement 8", 8]
  }
  var canvas = $("canvas")[0];
  var ctx = canvas.getContext("2d");
  ctx.font = "20px serif";
  
  Object.keys(questions).forEach(function(question, i) {
    var offset = i % 2;
    ctx.fillStyle = "green";
    ctx.fillRect(210 * offset, (i - offset) / 2 * 210, 200, 200);
    // next two lines optional:
    ctx.fillStyle = "white";
    ctx.fillText(question, 210 * offset + 30, (i - offset) / 2 * 210 + 60);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<canvas id "myCanvas" width="700px" height="1000px"></canvas>

Upvotes: 1

Related Questions