Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

134
Views
How can I remove the default canvas when I import a machine learning model from the teachable machine page?
// Classifier Variable
let classifier;
// Model URL
let imageModelURL = 'https://teachablemachine.withgoogle.com/models/x-zsz-E9i/';

// Video
let video;
let flippedVideo;
// To store the classification
let label = "";

// Load the model first
function preload() {
  classifier = ml5.imageClassifier(imageModelURL + 'model.json');
}


function setup() {
  createCanvas(320, 260);
  // Create the video
  video = createCapture(VIDEO);
  video.size(320, 240);
  video.hide();

  flippedVideo = ml5.flipImage(video);
  // Start classifying
  
  classifyVideo();
}

function draw() {
  background(0);
  // Draw the video
  image(flippedVideo, 0, 0);

  // Draw the label
  fill(255);
  textSize(16);
  textAlign(CENTER);
  text(label, width / 2, height - 4);
}

// Get a prediction for the current video frame
function classifyVideo() {
  flippedVideo = ml5.flipImage(video)
  classifier.classify(flippedVideo, gotResult);
  flippedVideo.remove();

}

// When we get a result
function gotResult(error, results) {
  // If there is an error
  
  if(label == "Azul"){
    document.body.style.backgroundColor = 'blue';
  }
  else{
    document.body.style.backgroundColor = 'yellow';
  }


  if (error) {
    console.error(error);
    return;
  }
  // The results are in an array ordered by confidence.
  // console.log(results[0]);
  label = results[0].label;
  // Classifiy again!
  classifyVideo();
}

I import my model from the Teachable machine page, and I don't know how to remove the default canvas, because if I simply remove it I can't capture the data it returns. Is there any way to make it transparent? Thank you very much.

The model is downloaded machine with the p5.js option

I try to make the canvas transparent, but I didn't get it

about 4 years ago · Juan Pablo Isaza
2 answers
Answer question

0

You're currently drawing into the default canvas:

  background(0);
  // Draw the video
  image(flippedVideo, 0, 0);

  // Draw the label
  fill(255);
  textSize(16);
  textAlign(CENTER);
  text(label, width / 2, height - 4);
  • background(0); means clear the previously drawn pixels by making them all opaque black
  • image(flippedVideo, 0, 0); will render the webcam image on top (hiding a large portion of the background)
  • text(label, width / 2, height - 4); will render the label on top of the background.

If you don't want to display the webcam image simply don't render it:

  background(0);
  
  // Draw the label
  fill(255);
  textSize(16);
  textAlign(CENTER);
  text(label, width / 2, height - 4);

(you don't need flippedVideo.remove(); in this case).

If you want to mostly display the text label, instead of background(), but want a black background for the text, you can use a rect() that has roughly the dimensions of the text. You can do this with rectMode(CENTER); (which will help with the center aligned text):

// Classifier Variable
let classifier;
// Model URL
let imageModelURL = 'https://teachablemachine.withgoogle.com/models/x-zsz-E9i/';


// Video
let video;
let flippedVideo;
// To store the classification
let label = "";

// Load the model first
function preload() {
  classifier = ml5.imageClassifier(imageModelURL + 'model.json');
}


function setup() {
  createCanvas(320, 260);
  // draw rectangles from center
  rectMode(CENTER);
  // Create the video
  video = createCapture(VIDEO);
  video.size(320, 240);
  video.hide();

  flippedVideo = ml5.flipImage(video);
  // Start classifying
  
  classifyVideo();
}

function draw() {
  // Draw the label background rect
  let margin = 3;
  fill(0)
  rect(width / 2, height - 5, 70, 25);
  // Draw the label
  fill(255);
  textSize(16);
  textAlign(CENTER);
  text(label, width / 2, height - 4);
}

// Get a prediction for the current video frame
function classifyVideo() {
  flippedVideo = ml5.flipImage(video)
  classifier.classify(flippedVideo, gotResult);
}

// When we get a result
function gotResult(error, results) {
  // If there is an error
  
  if(label == "Azul"){
    document.body.style.backgroundColor = 'blue';
  }
  else{
    document.body.style.backgroundColor = 'yellow';
  }


  if (error) {
    console.error(error);
    return;
  }
  // The results are in an array ordered by confidence.
  // console.log(results[0]);
  label = results[0].label;
  // Classifiy again!
  classifyVideo();
}
about 4 years ago · Juan Pablo Isaza Report

0

function draw() {
  let margin = 3;
  fill(0);
  rect(width, height - 0, 0, 0);
}

I changed this in the draw function and finally the entire canvas was gone.

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!