Canvas in HTML 5
The HTML 5 graphic surface is a versatile tool for creating applications, mobile or desktop.
Canvas is already used to create games and is therefore an alternative to Flash, as it serves for more serious applications such as cartography, geometric shapes, architect plans, etc.
One of the main trends among webmasters at present is the transfer of old software to this new medium. This is how we see Sim City, Wolfenstein 3D appearing on web pages.
Textbook
From the first steps to complex contours .
How many tags are on a web page?
Answer by example: you can get 10 thousand!
First steps with Canvas
How to use the canvas lighthouse.
Draw a line
And change color.
Draw a curve.
Quadratic curve vs. Bézier.
Rect and fillRect methods.
Draw and fill a rectangle.
Creates a rectangle with rounded corners.
Using the quadraticCurveTo function.
Drovinger bow.
Using the arc method. Interactive demonstration is enabled.
Circle to graph in circular sectors.
We make a pie graph by filling the sectors with different colors. Lyrics with a little extra trigonometry are added.
Draws an ellipse using the arc method.
arcTo method.
Shown example for understanding its work.
Basic transformations in the image.
How to flip an image, print a rotation, etc. These demonstrations also provide an opportunity to better understand the features of canvas, including seeing the benefits of the translate and rock function.
Transparency
How to make an image transparent.
Director's scripts
SVG in Canvas
Use predefined vector images recorded in SVG format in the canvas tag.
Maker logo
Online logo editor. Operation manual.
Pie Chart Generator
Online tool for creating a graph in pie shares, in a few clicks.
Filacterial dravinger at Canvas
Put the quote in the comic book bubble.