Databases
StackOverflow2013
Postsdbo
PODrawing to canvas acting buggy
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PODrawing to canvas acting buggy
    primarykey
    data
    text
    <p>I've recently started working on a side project, and experimenting with the canvas as I go. So let me explain what I want to happen: In my JS, the main() function is set to an interval. During main() the drawStep() function is called. This does several things, or it should. Sorry for the long explanation.</p> <ol> <li>Clear the canvas, so that what is drawn doesn't stick.</li> <li>Using a for loop, iterate through the array containing things that need to be drawn. currently only menu objects.</li> <li>checking if the variable debug is true, if so, draw the mouse coordinates as two red lines.</li> </ol> <p>However, when step 1 is done, drawing the menu objects fails, it flickers and the canvas clears to whatever color step 1 set the canvas to. When the debug var is set to true (through the console) Drawing the debug lines functions fine.</p> <p>Here is the code blocks that matter.</p> <p>Variables defined in an init() function, including the cookie cutter function for defining menu objects:</p> <pre><code>canvas = document.getElemntByID("canvas"); room = canvas.getContext("2d"); gameMode = 1; // telling the code that it is in the main menu debug = false; //not drawing the cursor coordinates menObj = new Array(); //an array of menu objects mouse_x = 0; //variable set through onMouseMove event in the canvas mouse_y = 0; //variable set through onMouseMove event in the canvas drawList = {}; //array of menu object draw() functions, and any other item that needs to be drawn during the main loop function menu(mxpos,mypos,mwid,mhid,name, funct,drawing){ this.x = mxpos; this.y = mypos; this.width = mwid; this.height = mhid; this.value = name; this.doing = funct; this.canDraw = drawing; //the code relies on a gameMode variable, only drawing what is allowed to when the game mode is set correctly. this.expand = 0; //not important, but was going to make buttons expand on mouse over this.maxExpand = 10; // same as above //The draw function passed on to the drawList array: this.draw = function(){ if (this.canDraw == gameMode){ room.fillStyle = "rgba(150,150,150,1)"; room.strokeStyle = "rgba(200,200,200,1)" room.fillRect(this.x-this.width/2,this.y-this.height/2,this.width,this.height); room.strokeRect(this.x-this.width/2,this.y-this.height/2,this.width,this.height); room.strokeStyle = "rgb(30,150,90)"; var xoff = room.measureText(this.value).width; var yoff = room.measureText(this.value).height; room.strokeText(this.value,this.x-xoff/2,this.y-yoff/2); } } } </code></pre> <p>Sample menu object creation and the for loop that adds that objects draw event to the drawList array:</p> <pre><code>var temMenVal = new menu(width/2,height/5,96,32,"Start",function(){gamemode = 1},0) menObj.push(temMenVal); for(var mobj in menObj){ if (!menObj.hasOwnProperty(mobj)) continue; drawList[mobj]=menObj[mobj].draw(); //push wasn't working, so I improvised. } </code></pre> <p>Main function, called from an interval timer.</p> <pre><code>function main(){ drawStep(); } </code></pre> <p>This is the draw function, where my issue is:</p> <pre><code>function drawStep(){ //the latest attempt at a fix, instead of using a clearRect(), which failed. //I tried this room.save() room.fillStyle="black"; room.fillRect(0,0,width,height); room.restore(); for (var n in drawList){ room.save(); if (!drawList.hasOwnProperty(n)) continue; if (n&lt;drawList.length){ drawList[n](); //calling the draw() from the nested menu object, it DOES work, when the above clear to black is NOT called } room.restore(); } if (debug == true){ room.beginPath(); room.strokeStyle="rgb(255,0,0)"; room.moveTo(mouse_x,0); //variable set through onmousemove event in the canvas room.lineTo(mouse_x,height); room.moveTo(0,mouse_y); //variable set through onmousemove event in the canvas room.lineTo(width,mouse_y); room.stroke(); room.closePath(); } } </code></pre> <p>I can't figure out why it keeps clearing to black, when the menu objects SHOULD be drawn after the clear. Like I said way up there, setting debug to true DOES draw the cursor coordinates correctly.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USLevia_neo
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. PODrawing to canvas acting buggy
      1. This table or related slice is empty.
      1. VTUpMod
    1. COI have found the problem, and worked in a solution to the code. As it turns out, all of the drawList array was empty. I have reworked the code to draw right from the menObj array. Thanks for your help guys.
      singulars
      1. PODrawing to canvas acting buggy
      1. USLevia_neo
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload