Develop Reference

Code not working properly, image should be appearing but is not

Hey all so currently im following a tutorial, and messing around in an attempt to make a game like agar.io. Below I have included the code. So what should be happing is when I start a local host, a black canvas should appear with a white blob/circle in the middle, but whenever I run this code im only getting a black canvas. If its any help at all, im using p5 and atom together. I cant seem to figure out why its not working. In the post I have separated the code since they are separate. But they run together. Im not getting an errors. Any insight would be greatly appreciated.
function Blob() {
this.pos = createVector(width/2, height/2);
this.r = 64;
this.show = function() {
fill(255);
ellipse(this.pos.x, this.pos.y, this.r*2, this.r*2);
}
}
var blob;
function setup() {
createCanvas(600, 600);
blob = new Blob();
}
function draw() {
background(0);
blob.show();
}

p5js positioning canvas Uncaught Type Error

I'm not sure what I'm doing wrong in this problem. I'm using OpenProcessing and trying to put a canvas element within a container but I'm running into an Uncaught TypeError, Cannot read property "id"
I'm copying the same code from https://github.com/processing/p5.js/wiki/Positioning-your-canvas
function setup() {
var cnv = createCanvas(100, 100);
var x = (windowWidth - width) / 2;
var y = (windowHeight - height) / 2;
cnv.position(x, y);
background(255, 0, 200);
}
This is my code...
function setup() {
var cnv = createCanvas(500, 100);
cnv.id("hello");
cnv.position(0,0);
}
function draw() {
}
Here is a link to my sketch...
https://www.openprocessing.org/sketch/407956

It has something to do with OpenProcessing because your code works absolutely fine on p5 editor (and locally).
The createCanvas method returns an object so calling the id function on it should not return "Cannot read property 'id' of undefined" as it did on OpenProcessing so createCanvas possibly isn't returning anything, and it should return an object according to p5 documentation..
You can try positioning the canvas using css as described in p5 wiki by adding a stylesheet that uses flexible box layout or try not using OpenProcessing if possible.

The createCanvas() function is not returning anything. This doesn't jive with what's in the P5.js reference, so I understand your confusion.
My guess is that OpenProcessing uses a slightly modified version of P5.js, because it doesn't really require any positioning. The canvas is always centered in the screen.
If you're going to continue using OpenProcessing, then I'd stop worrying about positioning the canvas yourself. Or I'd search for existing sketches that reposition the canvas and see how they do it.
Even if the createCanvas() function returns soemthing, I'm not sure what the id() function is supposed to do in this case. Nothing in the link you posted uses that function. Nonetheless, it seems to work fine if I run it locally.

Finding the variable of a Canvas Element in unobfuscated Javascript

I am working with a GameMaker Studio and exporting a game in HTML5.
A missing feature in GameMaker Studio is the ability to export an image of the screen to the photo album of iOS and Android devices.
My workaround idea is to use a 3rd party plugin for HTML5 that will allow me to save a Canvas.
However GameMaker obfuscates the final output of the javascript and canvas it creates.
All I need to do is find which global variable contains the Canvas and I can capture it.
I have gone through a sample of unobfuscated Javascript but I can't read the code well enough to know which global variable I am supposed to use to call the canvas in question (and I don't want to override the context of it will wipe the canvas).
I found where the Canvas is attached to the context. Can anyone help here?
A sample looks like this:
_j61.prototype._q61 = function () {
_C8 = document.getElementById("canvas").getContext("2d");
if (_C8) {
this._yr = new _e9._B9._ua();
this._yr._Gp(_C8);
this._yr._Jp(1.0 / this._xW);
this._yr._Rp(0.1);
this._yr._Mp(1.0);
this._yr._Bp(_e9._B9._ua._2q | _e9._B9._ua._3q);
this._Fm._xr(this._yr)
}
};
In my function (for example) what goes here?
HELPME.fillStyle = "#FF0000";
HELPME.fillRect(0,0,150,75);

canvas in canvas not displayed when requirejs structure used

I have a problem that is driving me insane.
I have something that works perfectly fine in one javascript file, but completely fails when using it with requirejs.
(function(){
define([], function (){
var Sprite = function(){
return {
spritesheet: null,
canvas: null,
context: null,
init: function(src, ctx){
this.canvas = document.createElement('canvas');
this.context = this.canvas.getContext('2d');
this.context.drawImage(src, 0, 0, 10, 20, 0, 0, 10, 20);
ctx.drawImage(this.canvas, 100, 100);
}
};
};
return Sprite;
});
}
)();
And in other file I have:
(function(){
define(["r", "sprite", "player"], function (Ra, Sprite, Player){
var Game = function()
{
return {
...SOME STUFF HERE...
canvas: null,
context: null,
something: function() {
this.canvas = document.getElementById("game");
this.canvas.width = 500;
this.canvas.height = 500;
this.context = this.canvas.getContext("2d");
var sprite = new Sprite();
sprite.init("image.gif", this.context);
};
};
return Game;
});
}
)();
I tried to compact the code as much as I can, I hope I didn't cut out anything important, but that is basically the part that is not working. I am also fairy new to requirejs so if I am doing something incredibly wrong, please tell me.
No matter what I do, everything seems to be fine, both canvases are created, all have the right properties, but the second one I am putting on the first one is not displayed. If I put plain image instead of canvas it works just fine, but canvas on canvas does not.
This drives me nuts, I tried so many possibilities, the code works just fine without all the requirejs stuff, but fails when I structure it that way. Does it have something to do with global scopes? How to make this work? I need canvas inside canvas.
Thank you for your time!
EDIT:
I have only <script data-main="main" src="libs/require/require.js"></script> loaded in my html file and <canvas id="game"></canvas> in body.
Then in main.js I have:
require.config({
baseUrl: "./modules",
waitSeconds: 10,
packages: [
{
name: "something not used yet",
location: "something not used yet",
main: "something not used yet"
}
]
});
require(['game'], function (Game)
{
var game = new Game();
game.begin();
});
Rest I already showed in the beginning.
I have main.html and main.js together in the build folder and all the others in build/modules folder.

Problem was the most ridiculous thing ever and I wasted way to much time to figure out something this obvious...
For some reason I completely forgot to wait for the image to load and kept using it before it is even loaded, and the complicated (for me at least) structure when using requirejs made it hard to pinpoint that mistake.
Also without requirejs the code worked because image loaded so fast, it was ready before the next function started even without onload, however when I switched to requirejs I guess it either slowed down, or the asynchronous nature of it created the problem.
Anyway, solved by simple onload handler.

Importing processing.webgl for 3d canvas when using processing.js in pure javascript

I would like to utilize some of the 3D shapes in processing.js.
I see that if I was using the processing 'language' I could just
import processing.webgl.*
And the compiler would ignore the import statement.
However I am currently coding in pure javascript and it isn't clear to me how to do this.
Can any one help?
EDIT
To more accurate about my problem, my setup function looks something like this:
p.setup = function() {
p.size(100, 100, P3D);
}
And I receive P3D is undefined

The process of drawing 3D shapes in Processing v.s. Processing.js is almost identical. You don't need to import anything if you're only developing in Processing.js. Instead, just pass P3D, OPENGL or WEBGL when you call size:
void setup(){
size(100, 100, P3D); // Can also be OPENGL or WEBGL
translate(width/2, height/2);
box(20);
}
EDIT
Here's a bit of HTML using Processing.js in pure JavaScript
(I got the code from: http://js.processing.org/learning)
<script src="processing.js"></script>
<canvas id="cvs"></canvas>
<script>
function sketchProc(p) {
// It makes more sense to use WEBGL if only developing in JavaScript
p.size(100, 100, p.WEBGL);
p.translate(p.width/2, p.height/2);
p.box(20);
}
var canvas = document.getElementById("cvs");
var pjs = new Processing(canvas, sketchProc);
</script>

So all I needed to do was change my size() call so it looked like this:
p.size(100, 100, p.P3D);
I needed to access the P3D constant through the processing object p.P3D.