Techious
http://www.techious.com/forums/

Javascript/Canvas
http://www.techious.com/forums/viewtopic.php?f=129&t=6180		 Page 1 of 1
Author:  Harry [ Thu Aug 26, 2010 9:04 pm ]
Post subject:  Javascript/Canvas
What am I doing wrong?
Each square goes to the current colour, rather than the colour of when it was set?

Am I going wrong with my array or something?

It's here


Spoiler for Codes:
Code:
<html>
<head>
<script type="text/javascript" src="jscolor/jscolor.js"></script>
  <script type="application/javascript">

       var num_squares = 0;
       function increaseBoxNumber()
       {
      num_squares++;
       }
   function draw() {
      var canvas = document.getElementById("canvas");
      var draw = canvas.getContext("2d");      
      var squareLength = 50;
      
      var sWidth = document.body.offsetWidth;
      var sHeight = document.body.offsetHeight;
      
      var row = 0;
      var column = 0;
      var box_per_row = 6;
      
      var i = 0; // loop colour picker
      
      var induvidualBoxColours= new Array();  // Array for holding each of the box's colours
      var whatBoxAmI = 0; // What is the current box?
      var numberOfBoxes = (column*box_per_row) + row; // total number of boxes
      
      for (loop=0;loop<=num_squares-1;loop++)
      {
         
         var newColourValue;
         for (whatBoxAmI=0;whatBoxAmI<=numberOfBoxes;whatBoxAmI++)
         {
            
            newColourValue = document.getElementById('colourBox').value; // Gets the value of the colour picker
            induvidualBoxColours[i] = newColourValue;   // Sets the array (and the next box's colour) to the previous lines var
            
            draw.fillStyle = "#" + induvidualBoxColours[whatBoxAmI]; // The colour for each box is the array and the current box nuber
            draw.fillRect (row*55, column*55, squareLength, squareLength); // x y h w
            
            draw.strokeStyle = '#000000'; // black border colour
            draw.lineWidth = 2; // border width
            draw.strokeRect(row*55,column*55,squareLength,squareLength); // Draw the border
            i++;
         }
         
         /*
            Text to put on each box, after the induvidual colours work
         
         draw.fillStyle = "#000000";
         draw.font = " 12px sans-serif";
         draw.fillText(colourValue, 5, 43);  ;
         */
         
         // This if statement makes it go boxes per row
         if (row >= box_per_row-1)
         {
            column++;
            row = 0;
         }
         else
         {
         row++;
         }
      }
         
   }
  </script>
</head>
<body onload="draw()">
   
   <input id="colourBox" class="color" value="#006FFF">
   <FORM>
      <INPUT type="button" value="Create a box" name="boxMaker" onClick="increaseBoxNumber();draw();">

   </FORM>
   <br>
   <canvas id="canvas" width="600" height="600"></canvas>     
   
</body>
</html>
Author:  azcn2503 [ Thu Aug 26, 2010 11:24 pm ]
Post subject:  Re: Javascript/Canvas
I didn't fix it but I did make this which is super similar:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
      <title>Canvas</title>
      <script type="text/javascript"><!--
         var boxes=0;
         var boxcols=new Array();
         function grab(o){
            return document.all?document.all[o]:document.getElementById?document.getElementById(o):"";
         }
         function draw(){
            var ncv=grab("colourbox").value;
            boxcols[boxcols.length]=ncv;
            var canvas=grab("canvas");
            var canvas2d=canvas.getContext("2d");
            var squareLen=50;
            var boxPerRow=12;
            for(var i=0;i<boxcols.length;i+=boxPerRow){
               for(var j=0;j<boxPerRow;j++){
                  var boxnum=i+j;
                  if(boxcols[boxnum]&&boxcols[boxnum]!="undefined"){
                     canvas2d.fillStyle=boxcols[boxnum];
                     canvas2d.fillRect(j*50,(i/boxPerRow)*50,squareLen,squareLen);
                  }
               }
            }
            grab("boxcolsText").innerHTML=boxcols;
         }
      //--></script>
   </head>
   <body onload="draw();">
      <input type="text" id="colourbox" value="#000" /> <input type="button" value="Box" onclick="draw();" />

      <canvas id="canvas" width="600" height="600" style="border:1px solid #000;"></canvas>

      <p>Array:</p>
      <textarea id="boxcolsText" style="width:600px;"></textarea>
   </body>
</html>


You can see what's going on in the array :)
Author:  azcn2503 [ Thu Aug 26, 2010 11:39 pm ]
Post subject:  Re: Javascript/Canvas
Also

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
      <title>Canvas</title>
      <script type="text/javascript"><!--
         var boxes=0;
         var boxcols=new Array();
         function grab(o){
            return document.all?document.all[o]:document.getElementById?document.getElementById(o):"";
         }
         function addLogEvent(s){
            eventLog+=s+"\n";
         }
         function draw(){
            eventLog=""; // global
            addLogEvent("*** STARTED ARRAY CHANGES");
            var ncv=grab("colourbox").value; addLogEvent("Setting ncv as "+ncv);
            boxcols[boxcols.length]=ncv; addLogEvent("Setting boxcols[boxcols.length] as "+ncv);
            addLogEvent("*** ENDED ARRAY CHANGES");
            var canvas=grab("canvas");
            var canvas2d=canvas.getContext("2d");
            var squareLen=50;
            var boxPerRow=12;
            addLogEvent("*** STARTED DRAWING");
            for(var i=0;i<boxcols.length;i+=boxPerRow){
               for(var j=0;j<boxPerRow;j++){
                  var boxnum=i+j;
                  if(boxcols[boxnum]&&boxcols[boxnum]!="undefined"){
                     addLogEvent("Info: Row "+i+", Cell "+j+", Box Number "+boxnum);
                     canvas2d.fillStyle=boxcols[boxnum]; addLogEvent("Box "+boxnum+" is being filled with "+boxcols[boxnum]);
                     canvas2d.fillRect(j*50,(i/boxPerRow)*50,squareLen,squareLen); addLogEvent("Box drawn to canvas successfully!");
                  }
                  // else{ addLogEvent("Info: Box Number "+boxnum+" does not exist in boxcols array"); }
               }
            }
            addLogEvent("*** STOPPED DRAWING");
            grab("boxcolsText").innerHTML=boxcols;
            grab("boxcolsLog").innerHTML=eventLog;
         }
      //--></script>
   </head>
   <body onload="draw();">
      <div style="position:absolute;top:0;left:0;"><input type="text" id="colourbox" value="#000" /> <input type="button" value="Box" onclick="draw();" /></div>
      <canvas id="canvas" width="600" height="600" style="position:absolute;top:50px;left:0;border:1px solid #000;"></canvas>

      <p>Array:</p>
      <textarea id="boxcolsText" style="width:400px;height:100px;position:absolute;top:0;right:0;"></textarea>

      <textarea id="boxcolsLog" style="width:400px;height:600px;position:absolute;top:100px;right:0;"></textarea>
   </body>
</html>
Author:  Si [ Fri Aug 27, 2010 9:34 am ]
Post subject:  Re: Javascript/Canvas
Fix'd (it was the second for loop screwing you up as well as having a few variables for the same thing, replace with an if and fix'd)

http://simoncook.org/static/tmp/harry/
Page 1 of 1 All times are UTC
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
http://www.phpbb.com/