What is the best way to layer two canvas elements on top of each other?


let vehicle;
let path;

function setup() {
  createCanvas(600, 600);
  
  vehicle = new Vehicle(50, 0);

}

function draw() {
  background(220);
  
  path.display();
  
  vehicle.follow(path);
  vehicle.update();
  vehicle.display();

  var redLight = 'red';
  var yellowLight = 'white';
  var greenLight = 'white';
  var count = 0;

  fill("black");
  rect(140, 70, 110, 250);
  fill(redLight);
  ellipse(195, 120, 60, 60);
  fill("white");
  text("RED", 182, 124);
  fill(yellowLight);
  ellipse(195, 200, 60, 60);
  fill("white");
  text("YELLOW", 171, 205);
  fill(greenLight);
  ellipse(195, 280, 60, 60);
  fill("white");
  text("GREEN", 175, 285);
}

Having a traffic light and a path on the same canvas is a challenge. You need to adjust the positioning of each element so they don't overlap. Experimenting with different coordinates and sizes can help achieve this.

javascriptp5.js

Answer №1

This code snippet contains multiple draw() functions, causing the second one to override the first. To resolve this issue, consolidate your drawing logic within a single function:

let vehicle;

let path;

function setup() {
  createCanvas(600, 600);
  
  vehicle = new Vehicle(50, 0);

  // Initialize path here
}

function draw() {
  background(220);

  path.display();

  vehicle.follow(path);
  vehicle.update();
  vehicle.display();

  drawTrafficLight();
}

var redLight = 'red'
var yellowLight = 'white'
var greenLight = 'white'
var count = 0;

function drawTrafficLight() {
  fill("black")
  rect(140, 70, 110, 250)
  fill(redLight)
  ellipse(195, 120, 60, 60)
  fill("white")
  text("RED", 182, 124)
  fill(yellowLight)
  ellipse(195, 200, 60, 60)
  fill("white")
  text("YELLOW", 171, 205)
  fill(greenLight)
  ellipse(195, 280, 60, 60)
  fill("white")
  text("GREEN", 175, 285)
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having difficulty generating bcrypt password hashes in Node.js

I am facing an issue with the following code. I am attempting to hash my admin password when they register. The password is initially set to a default value via the mongoose schema. However, the hashing process seems to not be working correctly. Below ar ...

javascriptnode.jsexpressjwtbcrypt

Error: Attempting to access an undefined property ('call') on Next.js is causing a TypeError

Exploring the realms of Next.js and Typescript for a new project! My goal is to utilize next.js with typescript and tailwind CSS by simply entering this command: npx create-next-app -e with-tailwindcss my-project Smooth sailing until I hit a snag trying t ...

javascriptreactjstypescriptnext.js

Using a JavaScript class rather than an ID for toggling visibility

As a complete newbie to JavaScript, I've come across similar questions but I'm lost when it comes to coding - help needed! So here's the code I have so far, and I'm hoping someone can assist me. Currently, I have JavaScript set up to s ...

javascriptjqueryhtmlcss

XPages component retrieval function is malfunctioning

Utilizing an XPage with JQuery dialog and client-side validation adds efficiency to the user input process. However, there seems to be a disconnect between the client-side validation and server-side properties. Although the client-side validation functions ...

javascriptjquerydialogxpagesssjs

Getting to the values within a JSON object that contains multiple arrays

Is there a way to retrieve array data from the json object data? const [data, setData] = useState([]) const getData = () => { axiosInstance .get(url + slug) .then(result => setData(result.data)) } useEffect(() = ...

javascriptjsonreactjs

Issue while rendering Vuex

Currently in the process of setting up a project using Vuex and Vue, I have encountered a peculiar issue. It seems to be related to the order of rendering, but despite multiple attempts to modify the code, the problem persists. My approach involved access ...

javascriptvue.jsvuexvuex-modules

Displaying local time alongside global time using PHP

I have a challenge - I am storing time in DATETIME format and now I need to display it in the local timezone. Does anyone know how to achieve this using PHP? ...

javascriptphphtml

Using jQuery's toggle function with a double click event to change the display to none

A div I created has the ability to expand to full screen upon double click, and I now wish to implement a toggle function so it can return to its original size when double clicked again. Initially, the code successfully increased the size of the div. Howe ...

javascriptjquerycss

What could be causing npm to not recognize my module in the "require" statement?

Currently, I am in the process of developing an npm module and conducting tests before making it available to the public. The method I am following is outlined in a blog post found at this link. However, I am encountering difficulties when trying to requir ...

javascriptnpm

${IDHERE} element's text color not changing when tab is switched

One dilemma I encountered involves displaying a percentage on a webpage with 2 tabs. The percentage is originally shown on the tab that is open when the page loads. The JavaScript code I used is quite straightforward: adaPercentColor(percent, ada) { ...

javascripthtmlcssangular

The error message "reload is not defined" indicates that the function reload

Initially, I encountered the error TypeError: require(...) is not a function, prompting me to add a semicolon at the end of require("./handlers/slashcommands"). However, this led to a new issue: ReferenceError: reload is not defined. This occurre ...

javascript

Identifying the absence of a character at the end of the last line in Node.js to detect

Currently, I am processing data line by line from a buffer. Within the buffer, the data is structured as follows: name,email,phn test1,<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="47332234337607223f262a372b226924282a">[em ...

javascriptnode.jstypescript

javascript best practice for processing form data with arrays

As a newcomer to javascript, I've been exploring more efficient ways to handle certain situations. For example, would it be possible to utilize an array for this particular scenario? Here's the challenge: I have an HTML form with 6 fields that a ...

javascripthtmlformssorting

Transform the appearance of buttons within AppBar using Material UI React

Embarking on a new project using React and Node JS has led me into the battle with Material UI. My current challenge is customizing the style of AppBar items, particularly the Buttons. Here's what I have in my "Menu" component: const Menu = () => ...

javascriptreactjsmaterial-ui

Tips for including a Places Autocomplete box within an InfoWindow on Google Maps

I am currently working with the Google Maps Javascript API v3 and I am facing a challenge. I want to integrate a Places Autocomplete box inside an InfoWindow that pops up when a user clicks on a marker. I have successfully created an autocomplete object a ...

javascriptjquerygoogle-mapsgoogle-maps-api-3autocomplete

When an action is dispatched, Vuex modifies two elements within the state

I am encountering an issue with my Vuex store in a Vue2 and Vuex2 setup. Upon dispatching a specific action, it alters the state of 2 elements in my store. Here's a snippet of the state with some dummy data for clarity: { "clients":[ ...

javascriptvue.jsvuex

Invoke a PHP function within a Bootstrap Modal using AJAX technology

My webpage features a list of users generated through a PHP loop. By clicking on each user's name, a Bootstrap Modal appears showcasing more information about the user. The hyperlink for each user looks like this: <a href="#user" data-toggle="mod ...

javascriptphptwitter-bootstrap-3bootstrap-modal

A guide on reading a file line by line using JavaScript and saving the content into an array

I have a file containing data in the following format: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f3929190b3969e929a9fdd909c">[email protected]</a>:name <a href="/cdn-cgi/l/email-protection" class="__cf_em ...

javascriptnode.js

What is the best way to include an uncomplicated HTML Element alongside a touch of JavaScript?

I'm facing an issue with WordPress. Due to security concerns, I cannot use the script tag directly within WordPress, so I have uploaded it to a separate server. My query is whether I can display the content from that link as a small widget on my WordP ...

javascripthtmlwordpress

Closing the menu on image click in Ionic 2

If you're using Ionic 2, you have the ability to include the menuClose directive on a button to automatically close the side menu when the button is clicked. However, what if you want to close the menu when an image is clicked instead of a button ...

javascripthtmlionic2