Creating a p5.js circle on top of an HTML image: A step-by-step guide

Currently, I am integrating an image into my web application using standard JavaScript and HTML. The image represents a basic map, and my objective is to utilize p5.js to draw on it.

<div id="map">
    <img src="Assets/MENA.jpg" class="image" width="1500" height="750">
</div>

function createConflictMapMENA() {
    this.name="MENA conflict map";
    this.id="conflict-map"


    this.draw = function() {
        var map = document.createElement('img')
        map.src = 'Assets/MENA.jpg'

        gallery.selectVisual(map);

        fill(255, 0, 0);
        ellipse(30, 30, 10);
    }

}

Within the this.draw = function(){} section, I am using p5.js library's ellipse() and fill() functions to depict a red circle. Here is a representation of what I have created:

https://i.sstatic.net/PXYwG.png

However, when I attempt to modify the coordinates to place the circle over the map, the circles end up positioned beneath it. Is there a method for me to make these two elements cooperate without needing to manually draw the circle in pure JS?

javascripthtmlcssp5.js

Answer №1

Is there a necessity for the image to be embedded in your HTML code? In case it is not required, you have the option of using the loadImage() and image() functions available in p5.js:

let myPhoto;

function setup() {
  createCanvas(400, 400);
  myPhoto = loadImage("https://example.com/image.jpg");
}

function draw() {
  image(myPhoto, 0, 0, width, height);
  
  ellipse(width / 2, height / 2, 100, 100);
}

If embedding the image within your actual HTML is necessary, then you can utilize a mix of CSS and the parent() function to have the image overlap with your sketch:

  <body>
    <div id="my-canvas"
         style="position:absolute;"></div>

    <img style="width: 400px; height: 400px;"
         src="path/to/another_image.png" />
    
    <script src="sketch.js"></script>
  </body>


function setup() {
  const surface = createCanvas(400, 400);
  surface.parent('my-canvas');
}

function draw() {
  ellipse(width / 2, height / 2, 100, 100);
}

Answer №2

After investigating your question, it appears that the reason for the background overlapping the circle is due to the depth level. You can adjust the depth of the circle to be greater than that of the background to resolve this issue.

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

Guide to establishing intricate conditions for TypeORM insertion

When attempting to insert data based on a specific condition, such as if shopId = "shopA", I want to include the shopdetail. In order to achieve this, I have implemented the following business logic, which is somewhat complex. Is there a more ef ...

javascripttypescripttypeorm

Utilize Rails file_field input as a clickable button

Currently, I have a button that needs to trigger the action associated with a file_field in my Rails application. Below is the erb code I am using: <label for='file-input'> <span class='btn btn-success' style='max-width ...

cssruby-on-railsrubyerb

How are the script name and script file connected in WordPress enqueuing?

When adding a jQuery script to the function.php file using the enqueue method, how does the script name relate to the actual file that contains the jQuery code? Is the script name arbitrary, or is it derived from either the file name or the actual script w ...

javascriptjquerywordpress

What is the best method for setting up message scheduling for a Microsoft Teams bot based on different time

I am trying to figure out how to send messages to users from my bot at specific time intervals. Currently, I'm using agenda for scheduling messages, but I've run into an issue with the timezone discrepancy - agenda is 5:30 hours behind my timezon ...

javascriptnode.jsbotframeworkmicrosoft-graph-apimicrosoft-teams

exploring for a keyword on the primary Amazon platform (analyzing)

Hey everyone, I noticed that Amazon's main search bar code looks like this: <input type="submit" class="nav-input" value="Go" tabindex="7"> I'm considering creating a function that will locate this tag on amazon.co.uk and perform a search ...

htmlparsingseleniumbeautifulsoup

The functionality of sending form data via Express.js router is restricted

In my current project, I am developing a basic CRUD functionality in express. My goal is to utilize the express.Router() to transmit form data via the HTTP POST method. The form structure on the browser appears as follows: form.png The process was flawle ...

javascriptnode.jsexpress

A tool developed in Javascript that allows for the conversion of .ini files to .json files directly on the client

Does anyone know of a JavaScript library that can convert .ini files to .json files on the client-side? I checked out this library, but it doesn't meet my requirements. Here is an example of an .ini file: [Master_Settings:1] Model Name=RC-74DL IP Ad ...

javascriptjsonconvertersini

Navigating the route on express.js using two strings can be done by matching them effectively

I have a single route function that should match two different paths. The goal is to create profile pages for team members on a website, which can be accessed at www.domain.com/name. However, some team members prefer to use nicknames instead of their actua ...

javascriptregexnode.jsexpress

Creating multiple React applications using shared configuration files: A step-by-step guide

I am in the process of developing a React app, and my goal is to create multiple React apps that share the same configurations - including modules and configuration files like tailwind.config.cjs. How can I modify my environment to achieve this? My plan i ...

javascriptreactjstailwind-cssviteconfig

The addClass() method seems to be malfunctioning following an ajax request

My current project involves setting up an AJAX call that is triggered when a user clicks on an anchor link. Once the AJAX operation is successful, I want to dynamically add a class to the specific anchor that initiated the call. The script itself seems to ...

javascriptjqueryajax

`Passing JavaScript variables through HTML anchor tags`

I am currently attempting to pass the id to the controller using this method: {{ route("admin.service.edit", '+val[0]+' )}} However, the '+val[0]+' is being interpreted as a string in the URL http://localhost:8000/admin/servi ...

javascripthtmlajaxlaravel-5anchor

The modals equipped with data-dismiss="modal" and data-target="#id" do not navigate to their intended destination

Attempting to focus the input field using the modal data-target function on button click. The input field is focused, but a div called <div class="modal-backdrop in"> is created and the modal does not close properly. This prevents the user from click ...

javascriptjqueryhtmlcsstwitter-bootstrap

Include the image source in the array

Currently, I am utilizing this loop to showcase images using Smarty {foreach from=$gallery item=image key=KEY} <div class="col-lg-2 col-md-2 col-sm-4 col-xs-6 smallImage"> <img ng-click="bigImage('/files/galleries/{$image.gallery ...

javascriptphpangularjssmarty

Exchange one HTML element with a different HTML element

I've been attempting to change an HTML tag using PHP or jQuery. The current default tag is: <li class="dropdown"> <a href="index.html" class="dropdown-toggle"> Home</a></li> My desired replacement for the above HTML tag is: ...

javascriptphpjqueryhtmlcss

The small screen @media query is malfunctioning and not displaying correctly

After creating an HTML file and CSS file, I have encountered a styling issue. When viewing the output on a larger screen, the text "I LOVE CODING, I WILL BECOME AN EXPERT." should be displayed in blue on a red background. However, on smaller screens, it ne ...

htmlcss

Fade out a dynamically loaded content block using jQuery

I am currently developing a small app and encountering issues with deleting (fading out) dynamically loaded div elements using jQuery. The problem occurs when adding a new content box. If the page is reloaded and the content box is rendered normally (from ...

javascriptphpjquerycssajax

Using ng-bind-html does not offer protection against cross-site scripting vulnerabilities

I utilized ng-bind-html to safeguard against cross site scripting vulnerabilities. I came across information about sanitization and engaged in a discussion at one forum as well as another informative discussion. However, I encountered an issue where it di ...

javascriptangularjsxss

Refreshing a Thymeleaf table dynamically without having to reload the entire page

I am currently using the Thymeleaf attribute to render data, but I am now looking to add a "Search" button without reloading the page. Within the attribute departments, I am rendering a List<Department> from the database. While I understand how to a ...

javascriptajaxspring-bootthymeleaf

Extracting information from a designated website using Python, including pages with search functionality and javascript features

Visit the website where you will find a search input box in html. Input a company name into the search box, select the first suggestion from the drop-down menu (like "Anglo American plc"), navigate to the URL containing information about that specific com ...

javascriptpythonseleniumweb-scrapingbeautifulsoup

Having trouble getting jQuery JavaScript to work on Wordpress and feeling lost about how to implement no-conflict mode syntax

Trying to implement the code from this Codepen http://codepen.io/eternalminerals/pen/qdGvMo on my WordPress website at I understand that since WordPress is in no-conflict mode, I need to change $ to jQuery. I have made this adjustment and ensured that the ...

javascriptjqueryhtmlcsswordpress