The correct functionality of canvas coordinates may become unreliable once CSS has been implemented

After successfully setting up my drag and drop game in canvas, I decided to make my canvas responsive by adding the following code to my css file:

#canvas
{
    width:100%
}

However, this adjustment caused a discrepancy in my coordinates. Now, when I click on the center of an image, it no longer works as expected. Instead, I have to click near the image in order for it to register. This issue did not occur before making my canvas responsive through CSS.

Answer №1

The reason for this is that the <canvas> element has a specific size defined by its width and height attributes. These values not only determine the size of the underlying Image Data Array, but also establish the coordinate system used by the <canvas>.

If you resize the <canvas> using CSS, it does not alter the coordinate system of the canvas. There are two solutions to work around this issue:

  1. Scale the <canvas> dynamically through Javascript by setting the width and height attributes. Keep in mind that changing one of these attributes will clear the <canvas>.

  2. Determine the final size of the <canvas> after applying CSS scaling, then adjust mouse coordinates accordingly.

I recommend opting for method 1 as it ensures the canvas maintains a sharp appearance.

In general, libraries like paper.js offer convenient solutions for handling these scenarios.

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

Extract data with Python Selenium

Can someone help me figure out how to extract the value "document sent" from the HTML code below using Python's Selenium library? I've tried the code snippet provided, but it returns None. print(driver.find_element_by_id('errorMessage' ...

A button featuring an extensive label that utilizes text-overflow ellipsis is initially set with a max-width of 700px. However, it should dynamically shrink when the viewport size decreases

My Request I need a button that can accommodate both long and short labels, with the text getting cut off at 700px using ellipses. The button should adjust to the available space when the viewport is smaller than 700px. The length of the label can vary gr ...

Presenting JSON data in a table format on-the-fly even without prior knowledge of the data's structure or field names

When working with my application, I will be receiving data in JSON format and I am looking to showcase this data in a tabular form within a web browser. It's important to mention that I won't know beforehand the structure or field names of the re ...

Tips on avoiding scrolling when toggling the mobile navigation bar:

While working on a website using HTML, CSS, and BS3, I have created a basic mobile navigation. However, I am facing an issue where I want to disable scrolling of the body when toggling the hamburger button. The problem arises when the menu is toggled on, ...

The unique design of the list extends beyond the boundary line

In my current project, I am utilizing next.js and MUI (material-ui). The component I am working with has the following structure: <Paper> <List> .. </List> </Paper> One issue I am facing is that when the list is scrolled, the ...

Is it possible to move between textboxes using arrow keys in HTML?

Is there a way to navigate through textboxes using arrow keys in HTML without relying on jQuery? Possibly utilizing JavaScript, HTML, CSS, or another method? Thank you for your help! <body> <form> <input type="text"&g ...

The addition of input fields on keyup creates problems in the initial field of each row

I am currently working with a table and attempting to calculate the sums as follows: td(1) + td(2) + td(3) = td(4), td(5) + td(6) + td(7) = td(8), td(9) + td(10) + td(11) = td(12). This is the code I have implemented: $(document).ready(function () { ...

Is there a way to retrieve the filename of a file uploaded using a shiny fileInput function?

This shiny app has a feature where users land on the 'Upload data' panel upon launching. To restrict access to the other two 'tabpanels', users must first upload both necessary files in the 'Upload data' tab. The condition for ...

Trouble displaying complete image (ReactJS, CSS)

I am looking to create a visually stunning landing page that covers the entire screen, showcasing a captivating image. However, I have encountered an issue where only a portion of the image is visible due to additional divs being created. Here is what my ...

Tips for defining the width of columns that adapt to different screen sizes in Bootstrap version 4

Utilizing Bootstrap 3, I can effortlessly create a responsive table with adjustable columns using the grid system. Additionally, I have the ability to hide certain columns on smaller devices. For instance, consider this example where the table consists of ...

Centering Text and Image in React Horizontally

I'm attempting to achieve a layout similar to the one shown in the image below. Currently, my image is positioned at the top with the text below it. I would like to arrange it so that the text appears on the right side of the image. Please take a loo ...

Looking for a way to exclude both parents and children from a list of relatives? Want to ensure that the

I've been struggling to align these list elements with their counterparts, but they seem to automatically create a margin for their child elements. It is essential for these list items to maintain the position:relative attribute so that the #dropdown ...

Is there a way to position an image to the left of the container in Jinja templating while floating it?

I am currently working on a project using Flask that utilizes Jinja templates. In my layout.html file, there is a grey colored container that extends to all child pages. I have a specific page that extends the layout.html where I want to place an image flo ...

Encountering blank space in the first table row after a page break when creating a PDF using dompdf

Encountered a strange bug while working with dompdf for PDF generation. The issue arises when a page break occurs within a table. Subsequent to the break, the first tr on the next page displays an odd empty space on the left side (as depicted in the image ...

Issues with CSS rendering in the Chrome browser are causing display problems

After successfully creating an iFrames page tab on Facebook that looks great in Firefox and Internet Explorer, I encountered an issue with the div positioning in Chrome. You can view the page here: Oddly enough, this is the only page experiencing problems ...

Include a scrollbar within a div element nested inside a table cell

index.html <div id="wrapper"> words go here, many of them </div> style.css #wrapper { height: 100%; width: 200px; overflow: auto; } I have been struggling to display the scroll bar on my page, and this is what I am currently exp ...

Is it possible to apply search filters within a child component in Angular?

I have a situation where I am passing data from a parent component to a child component using *ngFor / @input. The child component is created multiple times based on the number of objects in the pciData array. pciData consists of around 700 data objects, ...

Employing setInterval() without clearing previously triggered events

Can someone clarify the distinction between these two functions: function displayTime(){ var current = new Date(); var hours = current.getHours(); var minutes = current.getMinutes(); var seconds = current.getSeconds(); ...

Having trouble retrieving POST data with NodeJS/Express and an HTML form?

I have encountered an issue in my application where I am unable to extract the posted data from req after performing an action pointing to a nodejs endpoint. Despite successfully executing the action, when attempting to access the posted data from req, I a ...

The AngularJS element fails to display on the screen

I am currently learning AngularJS and I am struggling to understand how components are linked to the view in the tutorial. I have created a component that is quite similar: angular.module('phonecatApp').component('nameList', { temp ...