Draw a image from file in the canvas without using a web server using p5.

leonnaley

As the heading states, I can't figure out how to cleanly do this in p5. Every website I find insist on me using a web server, but that's not an option for me.

I've managed to do this in raw javascript, but would very much prefer to do it cleanly in p5. Here is the javascript code that works for me but creates two canvases which is not desirable for me: The HTML contains a canvas tag and the image tag(and src), the CSS just hides the image from view.

Any help would be appreciated.

function setup() {
  oImage = document.getElementById("kart")
}

function draw() {
  createCanvas(500, 500);
    var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  ctx.drawImage(oImage, 10, 10);
  noLoop();
  rect(0, 0, 50, 50);
}

jeremydouglass

image from file

You mean a file on the user / client computer, at runtime?

In general, as a security feature modern browsers do not let JavaScript access files on the user's computer without user interaction, ever. So if I'm understanding you right the 'clean' solution you are looking for may not exist. Workaround like accessing already loaded resources might be the best you could do without a server.

GoToLoop

https://forum.Processing.org/two/discussion/12485/how-to-access-canvas-created-in-html-file-from-script-js