CODEWITHSUNDEEP
canvasprocessingprocessing.js
Kevin B
Kevin B

Reputation: 1

Processing.js - Error when canvas is placed in div

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.

oldCursor = curElement.style.cursor,

This is the line throwing the error "Uncaught TypeError: Cannot read property 'cursor' of undefined".

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?

<html>
  <head>
    <title>Test</title>
    <script type="text/javascript" src="processing.js"></script>
    <script type="text/javascript" src="jquery-1.6.3.js"></script>
  </head>
  <body>
    <h1>Example of bug</h1>
    <script type="application/processing" id="sketch">
    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);
    }
    </script>
    <!-- Canvas Element -->
    <canvas style="text-align:center; cursor: pointer; background-color: red; z-index:     0; margin:  0px; padding: 0px;" width="1280" height="720" id="canvas">You do not support     canvas.</canvas>     
    <div>
        <canvas style="text-align:center; cursor: pointer; background-color: blue; z-    index: 0; margin:  0px; padding: 0px;" width="1280" height="720" id="canvasbug">You do not support canvas.</canvas>     
    </div>

    <!-- Sketch Initializer -->
    <script type="text/javascript">    (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);
    })();
</script>
  </body>
</html>

Upvotes: 0

Views: 430

Answers (1)

David Humphrey
David Humphrey

Reputation: 11

You're not passing a canvas element, you're passing a jQuery object. If you do:

var canvas = $("#canvas")[0];
...
var canvasbug = $("#canvasbug")[0];

You'll get the raw elements.

Upvotes: 1

Related Questions