The Canvas drawn using JavaScript is not being resized and painted correctly on Safari mobile and Firefox mobile browsers

I created an HTML page that features a canvas element where I am drawing a roulette using JavaScript

After checking the CanIuse website, I learned that canvas functionality is supported in Firefox 68 and Safari 4 to 13

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>RuLetras 2020.06.20 - MGG</title>
        <link rel="stylesheet" type="text/css" href="style.css">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
        
    </head>
    <body style="font-size:14px">
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>

        <div class="container">
            <div class="row">
                <div class="col-md-12 col-sm-12 col-lg-12">
                    <label for="txtOptions">Roulette Options:</label>
                    <input id="txtOptions" type="text" value="a,e,i,o,u">

                    <button id="btnCreate" type="button">Create</button>
                    
                    <br>
                    <label for="selectRoulette">Use Roulette:</label>
                    <select id="selectRoulette" name="selectRoulette">
                    </select>

                    <button id="btnChangeColors" type="button" disabled>Change Colors</button>

                    <button id="btnSpin" type="button" disabled>Spin!</button>
                </div>
                <div class="col-md-12 col-sm-12 col-lg-12">
                    <canvas id="myCanvas" style="border:0px solid #d3d3d3;">
                    Your browser does not support the HTML5 canvas tag.</canvas>
                </div>
            </div>
        </div>
        <script type="text/javascript" src="ruletra.js"></script>
    </body>
</html>

I used JavaScript to resize the canvas to fit the width and height of the inner window. I also filled the background with gray to ensure the canvas is being drawn correctly.

The published version can be viewed at . It displays correctly on Chrome Mobile, but on Firefox Mobile 68.9.0 and Safari, only the form is visible, not the canvas with the roulette.

As I am new to debugging HTML and JavaScript on mobile browsers, I am seeking guidance on how to debug or diagnose why the painting is not rendering correctly (similar to accessing Developer Tools)

For this specific issue, any pointers on what might be causing the problem would be greatly appreciated.

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

javascripthtmlcssbootstrap-4html5-canvas

Answer №1

Struggling to transpile my code using Babel, I came across a helpful suggestion on Stack Overflow to use to check for compatibility issues in my JavaScript.

My code was utilizing features like class, arrow functions, and more.

After updating the code, everything is now running smoothly.

Additionally, there is a jshint plugin available for Visual Studio Code and other linters - https://marketplace.visualstudio.com/items?itemName=dbaeumer.jshint

Hopefully, this information proves beneficial to others in similar situations in the future.

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

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

Is there a method to verify the consumability of an API without having to make a direct request to it?

I'm working on an idle timer feature where the API will be called to update data once the timer runs out. How can I check if the API is still usable without actually sending a request? ...

javascriptajaxapi

Need Root Directories in Browserify and Using NPM (eliminating the constant use of '../../../..' in both cases)

Despite my extensive search for a solution to this issue, I have been unsuccessful so far – even after referring to the amazing gist on improving local require paths and thoroughly reading the Browserify handbook section on Avoiding ../../../../... I am ...

javascriptnpmgulpbrowserify

What are the best strategies for optimizing my CSS drop down menu to be both responsive and mobile-friendly?

I am struggling to make my current CSS and HTML menu fully responsive and mobile-friendly. I have researched solutions from other sources but have been unable to implement them successfully. I am seeking help in modifying my menu so that it adjusts to smal ...

htmlcssdrop-down-menuresponsive-design

What is the best approach to execute this function repeatedly at specific intervals?

I'm attempting to execute everything inside the checkUser() function, but it's not running at the specified interval. Is there a more efficient way to achieve this? My goal is to verify the address every few minutes. The line const accounts = awa ...

javascriptasync-await

What causes ngClick to stop working following $compile?

http://plnkr.co/edit/kL2uLPQu2vHHKIvRuLPp?p=preview Upon button click, the controller calls a service to compile HTML and inject it into the body. The compiled HTML (displaying "Hello World" from $scope.name) is referring to the scope of the controller, ...

javascriptjqueryangularjs

The state returned by React Redux does not meet the expected results

I recently implemented a like function on the backend using Node and MongoDB. This function successfully returns the post with an updated likes counter, which I tested using Postman. The post object contains properties such as likes, _id, by, createdAt, an ...

javascriptnode.jsreactjsmongooseredux

What is the best way to set checkboxes to default values using a model?

My journey with angular.js continues as I embark on creating my first non-tutorial web app. In this endeavor, I am utilizing two smart-tables and checklist-model for a seamless user experience. The initial table uses a st-safe-src of all_types, containing ...

javascriptangularjsjsonsmart-tablechecklist-model

Manage the Cancel button functionality in Safari/Chrome when dealing with the Open in App Store pop up

Is there a way to manage the Cancel button on the Open in App prompt when redirected from Safari/Chrome to the AppStore? The situation is as follows: A user is prompted to download the app via a browser link. Upon clicking the link, it determines whether ...

javascriptiosangularjsgoogle-chromedeep-linking

What is the method for displaying a canvas scene within a designated div element?

I need help displaying a scene inside an existing div on my webpage. Whenever I try to do this, the canvas is always added at the top of the page. I attempted to use getElementById but unfortunately, it didn't work as expected. What could I be overlo ...

javascriptjquerycanvas3dthree.js

Verify the accuracy of quiz responses with PHP and AJAX

I am working on a picture quiz that has one input field for each image. I am looking for a solution to verify if the value entered into the input field matches the correct answer. If it does match, I need to perform certain operations like adding or removi ...

javascriptphpjqueryajax

Tips for accessing the value of the range slider in Bootstrap 5 while it is being slid

Is it possible to capture the value from a Bootstrap 5 slider while sliding? I want to continuously receive the value as I move the handle, rather than only getting the final value when I release the handle. Currently, I am using a Bootstrap 5 range slide ...

javascriptjquerysliderbootstrap-5

Make sure to give an item a little extra attention by highlighting or making it blink after it has

I have a collection of items that I utilize to construct an unordered list using ng-repeat. When a new item is added, I want it to stand out by blinking or having some kind of effect to grab the user's attention. While it would be easy with jQuery, I ...

javascriptangularjs

Select a random object from a document and dispatch it. A Discord bot

I'm looking to enhance my bot by adding a command that retrieves a random quote from a JSON file and displays it in chat. I've already figured out how to do this using an array, but I'm not sure how to pull the quotes from a file. EDIT: ...

javascriptnode.jsfilebotsdiscord.js

When using the transition mode "out-in" in Vue, the returned ref element may be undefined

Encountering an issue where when mode="out-in" is used in a <transition mode="out-in">, a ref'd element returns undefined during the `updated` lifecycle. Strangely, it works fine without the `mode="out-in"` attribute. Any suggestions on how to ...

javascriptvue.jsvuejs2

bxSlider adds in an empty slide after deleting an image

Whenever I click a link in my navigation, I want to remove certain images from the page. I tried implementing a solution, but now I have two empty spaces where the images used to be. How can I remove those as well? I searched on Stack Overflow for a soluti ...

javascriptjqueryhtmlcssbxslider

Best Practices for Handling Pre-State Setting Mutations in Flux Design Pattern

Currently, I am developing a Vue application utilizing Vuex and following the Flux design pattern. I have encountered what seems to be an inefficient practice of duplicating code in small increments. I am hopeful that this is just a misunderstanding on my ...

javascriptvue.jsvuexflux

Break down and extract elements using typedEvent in TypeScript

Within the external library, there is the following structure: export interface Event extends Log { args?: Result; } export interface TypedEvent<EventArgs extends Result> extends Event { args: EventArgs; } export type InstallationPreparedEven ...

javascripttypescriptjavascript-objectstypescript-typings

Ways to set a default value in AngularJS when there is no value to compare in an array

Hello, I'm a newcomer to AngularJS and I have the following code snippet in HTML: // Here, I have another ng-repeat loop where I compare home.home_info_id with avg.home_inof_id <div ng-repeat='home in homeDetailInfo'> <div ng-r ...

javascriptangularjsangularjs-ng-repeat

What is the process of configuring a custom domain for localhost:3000 in a React application?

"scripts": { "start": "cross-env NODE_PATH=src react-scripts start", "build": "cross-env NODE_PATH=src react-scripts build", } Is there a way to replace localhost:3000 with a custom domain in Rea ...

javascriptreactjsfrontendcross-domainreact-scripts

Sending Grunt Jade configurations to a specific file

I'm currently using grunt-contrib-jade and I'm trying to utilize the pkg.name and pkg.version variables to generate my css file name. Unfortunately, I haven't been able to make this work on my own and would appreciate any assistance. Below i ...

javascriptgruntjs