Graphics distorting on android devices when implementing createjs and canvas technology

I have a question regarding the performance of my game that I'm developing to work on both desktop browsers and mobile devices. Using HTML5 and CreateJs, most of the game is being drawn on a canvas element.

While everything runs smoothly on a standard desktop browser, when I test it on an android device using PhoneGap, I notice strange glitches in the graphics. When I try to remove an object from the canvas like this:

stage.removeChild(myBitmap);
stage.update();

Sometimes, but not always, part of the bitmap remains on the canvas even after removing it, approximately 10% of it stays visible. It seems like I need to flush or redraw the canvas. Is this a known issue with canvas on android (I've only experienced it on android), or is it related to CreateJs?

The same issue occurs when I animate the bitmap's movement.

androidhtmlcordovahtml5-canvascreatejs

Answer №1

At last, I have discovered a resolution. This particular issue is well-known in android 4.1+ and appears to be primarily affecting Samsung (S2+) devices. More information on this problem can be found here.

To summarize, the solution that worked for me is as follows:

stage.update();
var canvas = document.getElementById("myCanvas");
canvas.style.opacity = 0.99;
setTimeout(function() 
{
    canvas.style.opacity = 1;
}, 1);

Therefore, it appears that PhoneGap and CreateJS are not to blame for 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

Having trouble incorporating custom elements with the document.execCommand function

I have been attempting to insert a custom element into an editable div using the document.execCommand method as described in detail on https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand. However, when I try to add a custom polymer eleme ...

htmlpolymer

What is the best method for arranging multiple images in a grid while keeping them within a specific maximum width and height?

I've been staring at this problem for a while now, attempting every possible solution to resize images and maintain aspect ratio, but none seem to work in my case. Here are two images that I manually resized so you can view them side by side: highly ...

javascripthtmlcssimagelayout

Developing a Customized Filtering Mechanism in Angular 8

I have some experience working in web development, but I am relatively new to Angular. My current project involves creating a simple filter for a table's column based on user input. However, I'm facing an issue where typing in a single letter fil ...

javascripthtmlangularweb

Tips for decreasing the space between elements in flexbox using justify-content: space-between

I'm in the process of creating a footer for my website and I've decided to utilize flexbox for the layout. Below is the CSS code I am using for my footer: .footer { display: flex; flex-direction: row; align-items: center; justify-content ...

htmlcssflexbox

Enable CDATA support in ActionView::Base.full_sanitizer

One method I found helpful was using the ActionView::Base.full_sanitizer.sanitize(value) to remove HTML content. It generally works well, but there is an issue when the value passed into the method is wrapped in because it returns a blank ...

htmlruby-on-railsrubycdata

Optimizing HTML5 metatags and styles for a mobile application

As a C++ developer who has recently delved into using HTML5 for my mobile applications, I am in need of guidance when it comes to fine-tuning my meta tags. While I do have some knowledge in web programming, there are still gaps in my understanding. I am s ...

csshtmlstylesmeta

What is the process of incorporating a video into a react.js project through the use of the HTML

I'm experiencing an issue where my video player loads, but the video itself does not. Can anyone shed light on why this might be happening? class App extends Component { render() { return ( <div className="App& ...

javascripthtmlreactjs

How to move a div beneath the JavaScript files in Drupal 7

I am facing a challenge where I need to position a div right above the body tag without interfering with the scripts located above it. Despite my efforts, I have not been successful in achieving this goal. I attempted to use Hook_page_build to position t ...

javascripthtmldrupal-7hook

Anomaly with Responsive Images in Internet Explorer 7

Something unusual has come up. In the process of developing a WordPress theme, I needed it to be completely responsive. I decided to create a "gallery" consisting of rows with 3 thumbnails each, which would open in a lightbox when clicked. To achieve this ...

htmlcssimageresponsive-design

PHP: Dynamically adjust image size from database to fit different screen sizes

Managing a website with various categories means each category has its own assigned image stored in the database. So, when a product from a specific category like bikes or chairs is displayed on the website, the corresponding image needs to be retrieved an ...

phphtml

Align an element to the center and then align a second element to the right using Tailwind CSS

Here is a visual representation of my goal: the dashed line indicates the center of the container. My objective is to horizontally center one div element and then right-align a second div within the same row, all while keeping both elements centered. htt ...

htmlcsstailwind-css

Combining 2 rows in an HTML table: A step-by-step guide

Can anyone help me figure out how to merge the first row and second row of a table in HTML? I have already merged two rows, but I am having trouble merging the first and second rows together. This is how I want my rows to be merged: |-------------------- ...

htmlmergerowhtml-table

`Prepare and load all materials in advance`

Question: On my page, I have a slideshow displaying images and videos. Before starting the slideshow, I want to ensure that all content on the page has loaded. Does $(window).load() verify if all content, including videos, has been loaded? Thanks in adv ...

jqueryhtmlvideoload

Navigating Parent Menus While Submenus are Expanded in React Using Material-UI

My React application includes a dynamic menu component created with Material-UI (@mui) that supports nested menus and submenus. I'm aiming to achieve a specific behavior where users can access other menus (such as parent menus) while keeping a submenu ...

javascripthtmlcssreactjsmaterial-ui

Python allows for the color coding of numbers using a method that is comparable to the conditional

Looking for a Python module or workaround to color code numbers from 0 to 100, transitioning from red to green. I want to visually represent a score by changing the font color based on the number without starting from scratch. Considering creating a dictio ...

pythonhtmlcssnumbersconditional-formatting

Adaptive Design - Content Fragmentation

I am currently working on a webpage layout that has the following HTML structure: <div class="row"> <div class="col3">test 1</div> <div class="col3">test 2</div> <div class="col3">test 3</div> </div ...

htmlcssresponsive-design

What separates $(document).ready() from embedding a script at the end of the body tag?

Can you explain the distinction between running a JavaScript function during jQuery's $(document).ready() and embedding it in the HTML within script tags at the bottom of the body? Appreciate your insights, DLiKS ...

javascriptjqueryhtml

jQuery Toggle and Change Image Src Attribute Issue

After researching and modifying a show/hide jQuery code I discovered, everything is functioning correctly except for the HTML img attribute not being replaced when clicked on. The jQuery code I am using: <script> $(document).ready(function() { ...

javascriptjqueryhtmlcss

Using scale transformations to animate SVG group elements

I am currently experimenting with an SVG example where I hover over specific elements to expand or scale them. However, I seem to have made a mistake somewhere or missed something important. Can someone offer me assistance? View the demo on JSFiddle here ...

javascriptjqueryhtmlcsssvg

JavaScript can retrieve the default page name that is hidden within the browser's URL

When a URL is entered without a specific file name at the end, such as "www.google.com," the server typically serves a default file like "index.html" or "default.aspx." In this scenario, if the browser displays "www.google.com," I am looking to extract the ...

javascripthtmlcss