HTML5 Canvas Rendering Optimization for Android KitKat

Resolve Bottlenecks,
Find Innovative Solutions
Generate Solutions

Solution Overview

Problem

Web content output performance is degraded on mobile devices running certain operating systems, such as KitKat (Android 4.4), particularly when rendering large areas on an HTML5 canvas, despite having good hardware, due to undefined reasons, which affects the execution of web games that require synchronized input and output timings.

Innovation Solution

A web content output apparatus and method that includes a device analyzer to identify device information, an entity extractor to classify entities into main and sub-entities, and a rendering engine to render only the main entity or reduce the resolution of sub-entities, allowing for optimized output by overlaying content generated in different rendering schemes, thereby preventing rendering performance degradation.

Engineering Contradictions & Design Principles

VSEngineering Contradiction Analysis

1Area of stationary object

If web content is rendered on a large area of HTML5 canvas, then the visual quality and completeness of the web content is improved, but the rendering performance is degraded on certain mobile devices running specific operating systems

Engineering Contradiction:
Improverendering areaVSAvoidrendering performance
Core Design Contradiction:
Area of stationary objectVSProductivity

Solution Approach 1:

The web document is divided into multiple blocks, each containing entities of similar importance levels. This segmentation allows the rendering engine to process and render blocks selectively based on device capabilities, rendering only necessary blocks on devices with poor rendering performance while maintaining visual quality on capable devices.

Inventive Principle:
Principle #1Segmentation

Solution Approach 2:

Entities within the web document are classified by importance levels (first, second, third, etc.), allowing different rendering strategies to be applied to different regions. Critical entities (first importance level) are always rendered, while less critical entities are conditionally rendered based on device performance, optimizing the balance between visual quality and rendering speed.

Inventive Principle:
Principle #3Local quality

2Loss of information

If all entities in the web document are rendered, then the completeness of the displayed content is improved, but the rendering time and resource consumption increase on mobile devices

Engineering Contradiction:
Improvecontent completenessVSAvoidrendering time
Core Design Contradiction:
Loss of informationVSLoss of time

Solution Approach 1:

The rendering engine performs partial rendering by selectively rendering only the necessary blocks containing entities of appropriate importance levels based on device capabilities. On devices with poor rendering performance, only critical content (first importance level entities) is rendered, sacrificing some content completeness to achieve acceptable rendering times and resource consumption.

Inventive Principle:
Principle #16Partial or excessive action

Solution Approach 2:

The system identifies device information and rendering performance characteristics, then uses this feedback to dynamically adjust the rendering strategy. The rendering engine adapts its behavior based on the specific device, choosing to render all entities on high-performance devices while selectively rendering only critical entities on low-performance devices, thus optimizing both completeness and time efficiency.

Inventive Principle:
Principle #23Feedback

Data Source

PatentUS10296566B2Apparatus and method for outputting web content that is rendered based on device information
Publication Date: 2019.05.21 SK PLANET CO LTD
  • US10296566B2 patent drawing
  • US10296566B2 patent drawing
  • US10296566B2 patent drawing

AI summary

Disclosed are an apparatus and a method for outputting web content. The apparatus and method can prevent rendering performance from being degraded in some operating systems when web content (web document) is output through a web browser.