​

// this is to know how to have something that you paint that layers over time

//that leaves like a trail but also something you can paint with that doesnt

//layer over time, that animates without leaving where it was before

​

//this is to learn how to have the rectangle move around with out leaving 

//a trail but also be able to paint over th canvas 

//you can either put the background in set up and everything will leave a 

//trail or if you put background in draw nothing will leave a trail 

//so to avoid this use createGraphics(); what this will do it is it will 

//let you have 2 canvases , one wiht trails one without trails and the

//one with trails i can layer on the one with trials 

​

// why cnat you use create canvas again? you have to use different 

//terminology. The canvas only refers to the actaul thing you are seeing

//but i want to create an offscreen canvas thats a grphics object

// i can call a function called clear , and what it does is make that 

//extra canvas transparent 

// if you want to the  red rect to be on top just move the rect after the 

//2nd canvas

// the background is frist then the second canvas then the rect 

​

​

let x = 200;

let y = 200; 

let extraCanvas;

​

let horse;

​

function preload(){

 horse= loadImage("pirouette horse1.jpg");

}

function setup() {

  createCanvas(400, 400);

  extraCanvas= createGraphics(400,400); 

  extraCanvas.clear();

  background (0);

}

​

function draw() {

//no trails

  //background(0);

​

​

//trails 

if (mouseIsPressed){

extraCanvas.noFill();

extraCanvas.stroke(244);

extraCanvas.ellipse(mouseX,mouseY,60,60);

}

   image(extraCanvas,0,0);

  x = x+random (-5,5);

y= y+ random (-5,5);

  fill (255,0,0);

  noStroke();

  rectMode(CENTER);

  rect(x,y,20,20);

}