When you use a canvas element in your web page, it creates a rectangular area on the page. By default,
this rectangular area is 300 pixels wide and 150 pixels high, but you can specify the exact size and set
other attributes for your canvas element. A Basic Canvas Element
<canvas></canvas>
Once you have added a canvas element to your page, you can use JavaScript to manipulate it any
way you want. You can add graphics, lines, and text to it; you can draw on it; and you can even add
advanced animations to it.
The Canvas API supports the same two-dimensional drawing operations that most modern
operating systems and frameworks support. If you have ever programmed two-dimensional graphics in
recent years, you will probably feel right at home with the Canvas API because it is designed to be similar
to existing systems. If you haven’t, you’re about to discover how much more powerful a rendering
system can be than the previous images and CSS tricks developers have used for years to create web
graphics.
To programmatically use a canvas, you have to first get its context. You can then perform actions on
the context and finally apply those actions to the context. You can think of making canvas modifications
as similar to database transactions: you start a transaction, perform certain actions, and then commit
the transaction.
this rectangular area is 300 pixels wide and 150 pixels high, but you can specify the exact size and set
other attributes for your canvas element. A Basic Canvas Element
<canvas></canvas>
Once you have added a canvas element to your page, you can use JavaScript to manipulate it any
way you want. You can add graphics, lines, and text to it; you can draw on it; and you can even add
advanced animations to it.
The Canvas API supports the same two-dimensional drawing operations that most modern
operating systems and frameworks support. If you have ever programmed two-dimensional graphics in
recent years, you will probably feel right at home with the Canvas API because it is designed to be similar
to existing systems. If you haven’t, you’re about to discover how much more powerful a rendering
system can be than the previous images and CSS tricks developers have used for years to create web
graphics.
To programmatically use a canvas, you have to first get its context. You can then perform actions on
the context and finally apply those actions to the context. You can think of making canvas modifications
as similar to database transactions: you start a transaction, perform certain actions, and then commit
the transaction.