동적으로 페이지에 상자 만들기

HTML 캔버스에 상자를 동적으로 추가하는 데 문제가 있습니다. 무작위로 임의의 색상으로 상자를 무작위로 만들어야합니다. 내가 상자로하고있는 것의 목표는 그들을 움직일 수있게하는 것이다. 본질적으로 나는 정말로 없어졌습니다.동적으로 페이지에 상자 만들기

window.onload = init; 

function init() { 
    //when page is loaded create a bunch of boxes randomly throughout the page 
    //get the body element of the document 
    var body = document.getElementsByTagName("body")[0]; 

    //create the canvas tag 
    var canvas = document.createElement("canvas"); 
    canvas.height = 666; 
    canvas.width = 1346; 
    var context = canvas.getContext("2d"); 

    //create the random boxes and append onto the canvas 
    var randNum = Math.floor(Math.random() * 1000 + 1); 

    var boxes = []; 
    for(var i=0;i<randNum;i++){ 
     boxes[i].height = 50; 
     boxes[i].width = 50; 
     boxes[i].x = Math.floor(Math.random() * (1346 - boxes[i].width)); 
     boxes[i].y = Math.floor(Math.random() * (666 - boxes[i].height)); 

     boxes[i].colour = '#'+ Math.round(0xffffff * Math.random()).toString(16); 
    } 

    for(var i=0;i<boxes.length;i++){ 
     context.fillStyle = colour; 
     context.fillRect(boxes[i].x, boxes[i].y, , boxes[i].height); 
    } 

    //append the canvas onto the body 
    body.appendChild(canvas); 
}

아무것도 그것의 속성에 문제가되는 것 같다 디버깅을 통해,이 페이지에 표시되지 않습니다 :

여기

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="UTF-8"> 
     <title>Ramdom Boxes</title> 
     <script src="A2Q1.js"></script> 
    </head> 

    <body>  
    </body> 
</html>

는 자바 스크립트 코드 : 여기

는 HTML 코드입니다. 나는 여기서 어디로 가야할지 모르겠다.

출처

2013-10-19 user2619395

을 찾으셨습니까? –

@BramVanroy 글쎄 그것은 상자에 도착하는 오류를 던지고있었습니다. (. 폭, .x, .y 등). 그러나 이제는 오류를 표시하지 않으며 상자를 표시하지 않습니다. – user2619395

'boxes [i] .y' 다음에 마지막 줄부터 여섯 번째 쉼표가 두 개 있습니다. 그것들은 그런 의미입니까? –