Databases
StackOverflow2013
Postsdbo
POProcessing.js - Error when canvas is placed in div
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POProcessing.js - Error when canvas is placed in div
    primarykey
    data
    text
    <p>I'm trying to get a canvas that is using Processing.js to appear fullscreen, but if I put the canvas into a div to get it to stretch fullscreen or center align it or do anything interesting, then the Processing.js throws an error saying the canvas has no style defined.</p> <pre><code>oldCursor = curElement.style.cursor, </code></pre> <p>This is the line throwing the error "Uncaught TypeError: Cannot read property 'cursor' of undefined". </p> <p>In the below section, the same code is applied to each canvas and the only difference I can see, is that the canvas is a child element?</p> <pre class="lang-html prettyprint-override"><code>&lt;html&gt; &lt;head&gt; &lt;title&gt;Test&lt;/title&gt; &lt;script type="text/javascript" src="processing.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="jquery-1.6.3.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;h1&gt;Example of bug&lt;/h1&gt; &lt;script type="application/processing" id="sketch"&gt; void setup(){ size(1280, 720); noFill(); smooth(); frameRate(50); background(255); strokeWeight(2); } void draw(){ stroke(0,244,244/4); ellipse(5,10,52,52); } &lt;/script&gt; &lt;!-- Canvas Element --&gt; &lt;canvas style="text-align:center; cursor: pointer; background-color: red; z-index: 0; margin: 0px; padding: 0px;" width="1280" height="720" id="canvas"&gt;You do not support canvas.&lt;/canvas&gt; &lt;div&gt; &lt;canvas style="text-align:center; cursor: pointer; background-color: blue; z- index: 0; margin: 0px; padding: 0px;" width="1280" height="720" id="canvasbug"&gt;You do not support canvas.&lt;/canvas&gt; &lt;/div&gt; &lt;!-- Sketch Initializer --&gt; &lt;script type="text/javascript"&gt; (function () { var init = function () { // This works fine var canvas = $("#canvas"); canvas.css("background-color", "pink"); var sketch = $("#sketch").text; canvas.css("background-color", "orange"); new Processing(canvas, sketch); canvas.css("background-color", "green"); //This is bugged var canvas = $("#canvasbug"); canvas.css("background-color", "pink"); var sketch = $("#sketch").text; canvas.css("background-color", "orange"); new Processing(canvas, sketch); canvas.css("background-color", "green"); } addEventListener("DOMContentLoaded", init, false); })(); &lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USKevin Workman
    1. USKevin B
    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
    1. VO
      singulars
      1. POProcessing.js - Error when canvas is placed in div
      1. USGeorge Profenza
      1. VTFavorite
    2. VO
      singulars
      1. POProcessing.js - Error when canvas is placed in div
      1. USChris Stocking
      1. VTFavorite
    1. This table or related slice is empty.
 

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