CODEWITHSUNDEEP
htmlcssp5.js
Sophia Wilton
Sophia Wilton

Reputation: 11

Overlaying drawing with p5js on top of image in HTML

I am really struggling trying to figure this one out. I am trying to overlay the circles ontop of an image. Preferably having the image in HTML. For whatever reason I can't seem to get this to work

var img;
function setup() {
createCanvas(800,800);
img=loadImage("DSC04051.jpeg");
function draw() {
image(img,0,0,);
circle(mouseX, mouseY, 100);
}

Upvotes: 0

Views: 719

Answers (1)

v.k.
v.k.

Reputation: 2854

When you call clear() it clears the screen :)

You can then call the image again.

Like this

function preload() {
  img1 = loadImage("DSC04051.jpeg");
}

function setup() {
  createCanvas(1000, 1000);
  // here it will affect the image in first display
  tint(100, 200);
  image(img1, 0, 0, 1000, 1000);
}

function draw() {
  if (mouseIsPressed) {
    circle(mouseX, mouseY, 100);
  }
}

function keyPressed() {
  clear();
  // just call it again to clear screen from drawings
  tint(100, 200);
  image(img1, 0, 0, 1000, 1000);
}

I also mooved the first tint() to setup, so it will affect the image from the begining.

Upvotes: 0

Related Questions