* @name Load and Display Image

 * @description Images can be loaded and displayed to the screen at their

 * actual size or any other size.

 */

let img; // Declare variable 'img'.

let layer;

// rev to show random color already in cursor BUT as stroke only, at click will be used as fill

let col;

​

function setup() {

  createCanvas(720, 400);

  img = loadImage('assets/moonwalk.jpg'); // Load the image

  layer = createGraphics(720,400);

  col = color(random(255),random(255), random(255)) ;

  strokeWeight(3);

  print("click for draw colored circle, key [c] for clear");

}

​

function draw() {

  image(img, 0, 0);

  image(layer,0,0);

  noFill();

  stroke( col ) ;

  circle( mouseX, mouseY, 50);

}

​

​

function mousePressed() {

  layer.noStroke();         // switch from stroke color to fill color 

  layer.fill( col ); 

  layer.circle( mouseX, mouseY, 50); 

  col = color(random(255),random(255), random(255)) ;  // for next

}

​

function keyPressed() {

  if ( key == 'c' ) layer.clear(); 

}