How to access Canvas created in HTML file from script.js

yalematta

I am new to p5.js and I want to access a Canvas I created in my index.html and apply the function draw on it, instead of creating a new canvas in the setup function. I tried to saved the Canvas into a variable with getElementById() but to reference to it in the draw function?

GoToLoop

• I'm not so sure whether that's possible! Not very experienced w/ p5js nor JS yet...
• p5js' API provides parent() which can attach any Node to another 1:
  http://p5js.org/reference/#/p5.Element/parent
• And id() which sets the id attribute for any Element:
  http://p5js.org/reference/#/p5.Element/id
• But neither of those can force the p5.Renderer created outta the createCanvas() to become the HTMLCanvasElement created outta the ".html" file: :(
  https://developer.Mozilla.org/en-US/docs/Web/HTML/Element/canvas
• In case you're using the "Instance Mode" approach: https://GitHub.com/processing/p5.js/wiki/Instantiation-Cases
• Perhaps you can pull the trick by passing your HTMLCanvasElement or its id attribute as the 2nd parameter when instantiating p5: new p5(sketch, 'my_canvas_id'); :-??

leonnaley

Thank you so much for the info.

I was able to turn the problem around, removed the canvas tag from my html, then made p5 create it, only to find it , create a context and draw a loaded image from the dom. So now it looks better, and feels better to me.

I still miss a clean p5 alternative to the functionality from the drawimage method though. But this will do. An excerpt from my new code:

oImage = document.getElementById("kart")
createCanvas(windowWidth, windowHeight - 20);
var oCanvas = document.getElementById("defaultCanvas0");
var oDrawingArea = oCanvas.getContext("2d");
oDrawingArea.drawImage(oImage, iX, iY);

GoToLoop

• p5.js got clean solutions already: loadImage() within preload() for example.
• Both loadImage() & createCanvas() got an underlying HTMLCanvasElement, accessed by its property elt.
• In order to draw your image, just call image().