Using graphics with canvas, SVG, and CSS3 (HTML)
[ This article is for Windows 8.x and Windows Phone 8.x developers writing Windows Runtime apps. If you’re developing for Windows 10, see the latest documentation ]
This section contains information on using graphics in your Windows app using JavaScript.
In this section
| Topic | Description |
|---|---|
The canvas element produces a rectangular bitmap canvas on your page where you can use JavaScript to draw graphic images on the fly. The canvas is great for creating games or any situation in which you’re generating graphics in real time or changing them at regular intervals. |
|
The canvas element is a drawable region on your HTML document that you can use JavaScript for generating graphics such as animations, graphs, and games. This topic gets you started by describing the steps needed to animate a basic drawing using the canvas element. |
|
Shapes and lines aren’t limited to solid colors. A gradient used in canvas is actually a type of color value, so you can apply it to fillStyle and strokeStyle properties. Gradients can be used to produce a directional change in intensity or color in an image. This is useful for producing background images, indicating altitude in maps, or anywhere you want to add lighting and shading to a surface. Gradients are useful in streamlining your web apps as you can avoid using images for these effects and minimize the bandwidth and the time it takes to load them. And because they are produced programmatically they can be scaled and reused easily. |
|
The canvas element is a drawable region on your HTML document that you can use JavaScript for generating graphics such as animations, graphs, and games. This topic gets you started by describing the steps needed to display an image using the canvas element. |
You can use CSS and SVG canvas in Windows Store apps to add fast, lightweight vector graphics and to animate your UI.
Almost any vector graphic can be drawn by using SVG or Canvas, but sometimes there is significantly more work to be done either by the developer or by the computer depending upon the task.
Cascading Style Sheets, Level 3 (CSS3) 2D Transforms enable you to translate (move), rotate, scale, and skew objects in 2-D space. CSS3 3D Transforms support these same transformations in 3-D space with the added ability to simulate a sense of depth through a perspective transform.
When multiple transformations are specified individually, the results of the transformations are cumulative and depend on the order in which they are applied.