HTML5 Canvas Problems

Recently, I tried to develop client programs using Hybrid in a project to minimize the upgrade troubles caused by changes in the program business logic or display interface. Hybrid is a combination of local code and HTML5 applications. The local code is responsible for dealing with the underlying hardware and passing hardware data to the running HTML page through the interface provided by WebView. This method is suitable for applications that require both hardware and client business logic pages. Of course, this article is not about Hybrid, but about Canvas when implementing HTML pages. 1. In the previously developed pages, height, width, style. height, and style. width are usually used to control the size of elements on the page through CSS. The same method was used when Canvas was first used, but the results were unexpected. The Code is as follows: [html <div id = "wrapper"> <canvas height = "50" id = "canvas1" style = "width: 100% "> </canvas> <pre name =" code "class =" html "> <canvas height =" 50 "id =" canvas2 "style =" width: 100% "> </canvas> </pre> <div> according to the responsive webpage design principle, the size of elements can be adjusted by the percentage control to adapt the resolution changes of different browser windows. However, this is not true for Canvas. After the above code is executed, different effects will appear each time. Sometimes the width of canvas1 is less than half that of wrapper, and sometimes the height is inexplicably close to PX. The lines drawn inside cannot find the shadow. It was found on Stackoverflow: http://stackoverflow.com/questions/4938346/canvas-width-and-height-in-html5 . Originally, the actual size of the Canvas is controlled by the height and width. In CSS, the height and width make the displayed size, so setting them is equivalent to scaling the display area, so it will be deformed. After finding the cause, it is easy to solve the problem: [html] <div id = "wrapper"> <canvas id = "canvas1" height = "50" width = "300"> </canvas> <canvas id = "canvas2" height = "50" width = "300"> </canvas> </div> The following JavaScript code is used to set the size: [html] function resizeCanvas () {var width = document. getElementById ('wrapper '). offsetWidth; $ ('# canvas1 '). attr ('width', width); $ ('# canvas2 '). attr ('widt', widht);} 2. clearRect cannot clear the Canvas that will be re-painted on a regular basis in the application in the specified area. Ct to clear the entire Canvas. There is no problem at the beginning. After about one hour of running, the content cannot be cleared. In the above answer, we mentioned that resetting the size of the Canvas will clear the original content, so we adopted the following method: [javascript] var context = document. getElement ('canvas1 '). getContext ('2d '); var width = $ (' # canvas '). attr ('width'); $ ('# canvas1 '). attr ('width', 0); $ ('# canvas1 '). attr ('width', width); context. clearRect (0, 0, width, $ ('# canvas1 '). attr ('height'); no problems have been found after testing for a period of time.