The Windows Paint program has been accompanying all versions of Windows. This very simple, almost useless program has the most basic drawing functions and is very suitable for doodling. HTML5's Canvas object makes online drawing possible. Although HTML5 is far from mature, many people can't wait to use it to design some amazing applications.
CanvasPaint is a standard Windows painting program based on HTML5. It has the same interface and operation as the Windows Paint program, and its functions are almost identical. With the support of specific browsers, you can even save the final work to your local machine. This is not a recent project, it has been around since 2006, so most current browsers that support standards (Firefox, Safari, Chrome, Opera) can use this program normally. Here are some explanations from the author about this project.
Why was this program developed?
The purpose is not to develop a Windows drawing program, but to experience the Canvas function of HTML5.
How to use is the same as standard Windows drawing programs.
Can it be saved?
Yes, but it only supports Firefox 2 and Opera 9 (Translator's Note: This is a program implemented by the author in 2006). To save locally, select Download in the File menu, save online, and select Save online, a URL will be automatically generated to display your work online.
The right-click menu of the browser itself affects the use of the right-click menu. You can disable the right-click menu in the browser settings.
Why are some functions not available?
Some features are supported in specific browser versions (Translator's Note: This is as of 2006):
Color pickerFirefox 2.0Opera 9 Flood fillOpera 9 Save imageFirefox 2.0Opera 9 Open URLFirefox 1.5Opera 9Latest Is the WebKit Canvas object easy to use?
Great for applications that don't require cross-browser support. But in painting, the biggest problem is that, limited by the refresh rate of the mousemove event, it is not easy to find the position of the cursor, especially when using an airbrush. Also, when the size becomes very large, it becomes very slow and there is no getPixel() function.
Technical Details Five Canvas objects are used in the program.
A main artboard, a transparent artboard layer floating above to display the preview painting content, a hidden Canvas used to cache the selected content, another used to cache the undo status, and one used in the program title bar to display gradient colors.
Others’ HTML5 Canvas experiments
Canvascape 3D (implementing a simple first-person shooter game using HTML5)
CanvasGraph (an HTML5 Canvas drawing JavaScript library)
Image reflections (implementing image reflections using HTML5 Canvas)
Canvas Painter (a simpler Canvas drawing program)
A truly amazing HTML drawing program If the above program has got you excited about HTML5's Canvas feature, here's a drawing program that will wow you. It has an interface experience and smoothness that is not inferior to that of the desktop. On a multi-screen computer, I even have the urge to drag those floating tool panels to the second screen.
-